三栏（上下）

2023年01月23日

柏拉文

越努力，越幸运

一、Flex 布局

---

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

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

实时编辑器

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

        return (
            <div style={ containerStyle }>
                <div style={ leftStyle }></div>
                <div style={ centerStyle }></div>
                <div style={ rightStyle }></div>
            </div>
        );
}

结果

Loading...

二、Grid 布局

---

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

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

实时编辑器

function Test(props) {
    const containerStyle = {
        width: '100%',
        height: '400px',
        backgroundColor: 'red',
        display: 'grid',
        gridTemplateRows: '100px auto 100px',
    }
    const leftStyle = {
        backgroundColor: "yellow"
    }
    const centerStyle = {
        backgroundColor: "green"
    }
    const rightStyle = {
        backgroundColor: "blue"
    }

    return (
        <div style={ containerStyle }>
            <div style={ leftStyle }></div>
            <div style={ centerStyle }></div>
            <div style={ rightStyle }></div>
        </div>
    );
}

结果

Loading...

三、Table 布局

---