跳到主要内容

场景

2023年02月18日
柏拉文
越努力，越幸运

一、多列布局​

场景背景: 实现 4 列多列布局

场景解决: 通过 columns: 4 auto 来实现多列布局

实时编辑器
function Test(props) {
    const container = {
        width: "200px",
        columns: "4 24px",
        backgroundColor: "red",
    }
    const item = {
        height: "80px",
        backgroundColor: "yellow"
    }
    return (
        <div style={ container }>
            <div style={ item }></div>
            <div style={ item }></div>
            <div style={ item }></div>
            <div style={ item }></div>
            <div style={ item }></div>
            <div style={ item }></div>
            <div style={ item }></div>
            <div style={ item }></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 containerStyle = {
        width: '300px',
        height: '300px',
        backgroundColor: 'red',
        columns: "3 4px"
    }
    const itemStyle = {
        height: "84px",
        marginBottom: "4px",
        backgroundColor: randomColor16(),
    }

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