跳到主要内容

场景

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

一、两栏布局​

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

场景解决: 给父元素设置display: table, 给自适应子元素设置width: 100%; display: table-cell;

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

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

二、三栏布局​

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

场景解决: 给父元素设置display: table, 给自适应子元素设置width: 100%; display: table-cell;

实时编辑器
function Test(props) {
    const containerStyle = {
            width: '100%',
            height: '300px',
            display: 'table',
            backgroundColor: 'red',
        }
        const leftStyle = {
            width: "200px",
            height: "100%",
            backgroundColor: "yellow"
        }
        const centerStyle = {
            width: "100%",
            height: "100%",
            display: "table-cell",
            backgroundColor: "blue"
        }
        const rightStyle = {
            width: "200px",
            height: "100%",
            backgroundColor: "yellow"
        }

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

三、多列布局​

场景背景: 需要有多列,并且有固定间距

场景解决: 通过 Flex 划分每一行的元素排列, 通过 Grid 中的 gap 属性规定间距

场景实现

实时编辑器
function Test(props) {
  const table = {
    width: "400px",
    display: "table",
    borderSpacing: "8px",
    backgroundColor: "red",
  }
  const row = {
    display: 'table-row'
  }
  const column = {
    display: "table-cell",
    height: "100px",
    backgroundColor: "yellow"
  }
  return (
     <div style={ table }>
        <div style={ row }>
            <div style={ column  }></div>
            <div style={ column }></div>
            <div style={ column }></div>
            <div style={ column }></div>
        </div>
        <div style={ row }>
            <div style={ column }></div>
            <div style={ column }></div>
            <div style={ column }></div>
            <div style={ column }></div>
        </div>
      </div>
  );
}
结果
Loading...

四、九宫格布局​

场景背景: 实现九宫格布局

场景解决: 通过 display: flex; gap: 24px; 实现

实时编辑器
function Test(props) {
    const randomColor16 = ()=>{
        let r = ((Math.random() * 256) >> 0).toString(16);
        let g = ((Math.random() * 256) >> 0).toString(16);
        let b = ((Math.random() * 256) >> 0).toString(16);
        if (r.length < 2) {
            r = "0" + r;
        }
        if (g.length < 2) {
            g = "0" + g;
        }
        if (b.length < 2) {
            b = "0" + b;
        }
        return `#${r}${g}${b}`;
    }

    const table = {
        width: '300px',
        height: '300px',
        backgroundColor: 'red',
        display: 'table',
        borderSpacing: "4px",
    }
    const row = {
        display: "table-row"
    }
    const column = {
        width: "100px",
        height: "100px",
        display: "table-cell",
        backgroundColor: randomColor16(),
    }

    return (
        <div style={ table }>
            <div style={ row }>
                <div style={ column }></div>
                <div style={ column }></div>
                <div style={ column }></div>
            </div>
            <div style={ row }>
                <div style={ column }></div>
                <div style={ column }></div>
                <div style={ column }></div>
            </div>
            <div style={ row }>
                <div style={ column }></div>
                <div style={ column }></div>
                <div style={ column }></div>
            </div>
        </div>
    );
}
结果
Loading...

五、水平垂直居中布局​

场景背景: 通过 table 实现水平垂直居中布局

场景解决: 通过 text-align: center; vertical-align: middle; 实现

实时编辑器
function Test(props) {
    const containerStyle = {
        width: '400px',
        height: '400px',
        backgroundColor: 'red',
        display: 'table-cell',
        textAlign: "center",
        verticalAlign: "middle"
    }
    const itemStyle = {
        display: "inline-block",
        backgroundColor: "yellow"
    }

    return (
        <div style={ containerStyle }>
            <div style={ itemStyle }>嘻嘻哈哈</div>
        </div>
    );
}
结果
Loading...

场景解决特点: 项目不需要指定宽高，可以根据内容自适应居中

六、最高子元素布局（等高布局）​

解决方案: 设置父元素为display: table,子元素为height: 100%; display: table-cell;

实时编辑器
function Test(props) {
    const containerStyle = {
        width: '400px',
        height: '600px',
        display: 'table',
        alignItems: "stretch",
        justifyContent: "space-between",
        flexWrap: "wrap",
        backgroundColor: "blue"
    }
    const itemSpanStyle1 = {
        width: "30%",
        height: "100%",
        display: "table-cell",
        backgroundColor: "red"
    }
    const itemSpanStyle2 = {
        width: "20%",
        height: "100%",
        display: "table-cell",
        backgroundColor: "red"
    }
    const itemSpanStyle3 = {
        width: "50%",
        height: "100%",
        display: "table-cell",
        backgroundColor: "red"
    }
    return (
        <div style={ containerStyle }>
            <div style={ itemSpanStyle1 }>哒哒哒哒哒</div>
            <div style={ itemSpanStyle2 }>嘻嘻</div>
            <div style={ itemSpanStyle3 }>红红火火恍恍惚惚哈哈哈哈哈哈哈你哈哈哈哈</div>
        </div>
    );
}
结果
Loading...