flex实现三列布局

2021-02-07 182 阅读1分钟

<body>
    <div class="box">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
    </div>
</body>

</html>
<style>
    .box {
        display: flex;
    }

    .left,
    .right {
        width: 200px;
        height: 200px;
    }

    .left {
        background: red;
    }

    .right {
        background: blue;
    }

    .center {
        background: yellow;
        flex: 1;
        height: 400px;
    }
</style>