跳到主要内容

两栏（上下）

2023年01月23日
柏拉文
越努力，越幸运

一、Flex 布局​

场景背景: 实现一个左宽为200px, 右宽自适应的两栏布局

场景解决: 通过项目 flex: 1 实现(flex: 1 === flex: 1 1 0)

实时编辑器
function Test(props) {
    const containerStyle = {
            width: '100%',
            height: '600px',
            backgroundColor: 'red',
            display: 'flex',
            flexDirection: "column"
        }
        const leftStyle = {
            flex: "none", // flex: none === flex: 0 0 auto  不会缩短，也不会伸长
            height: "100px",
            backgroundColor: "yellow"
        }
        const rightStyle = {
            flex: 1,  // flex: 1 === flex: 1 1 0 即会缩短，也会伸长
            backgroundColor: "blue"
        }

        return (
            <div style={ containerStyle }>
                <div style={ leftStyle }></div>
                <div style={ rightStyle }></div>
            </div>
        );
}
结果
Loading...

二、Grid 布局​

场景背景: 实现一个左宽为200px, 右宽自适应的两栏布局

场景解决: 通过 grid-template-columns: 200px auto 实现

实时编辑器
function Test(props) {
    const containerStyle = {
        width: '100%',
        height: '400px',
        backgroundColor: 'red',
        display: 'grid',
        gridTemplateRows: '200px auto',
    }
    const leftStyle = {
        backgroundColor: "yellow"
    }
    const rightStyle = {
        backgroundColor: "blue"
    }

    return (
        <div style={ containerStyle }>
            <div style={ leftStyle }></div>
            <div style={ rightStyle }></div>
        </div>
    );
}
结果
Loading...