Flex圣杯布局(简易)

就像圣杯一样无论中间的内容大小如何改变(自适应)两边的盒子都是不变的

如图:

效果图如下

圣杯布局起源

html部分

分为左中右三个部分

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

css部分

对左右两个盒子设置宽高,中间盒子不需要设置宽(自适应),在父级盒子添加flex属性,中间盒子添加flex:1沾满剩余空间

<style>
        .box {
            height: 100px;
            background-color: aqua;
            display: flex;
            margin: 200px auto;
        }

        .box .left,
        .box .right {
            height: 100px;
            width: 100px;
            background-color: chartreuse;
        }

        .box .center {
            height: 100px;

            background-color: hotpink;
            flex: 1;
        }
    </style>

圣杯布局是移动端中十分重要的布局方式

如下结构非常建议使用

原文链接：https://blog.csdn.net/vGuYi/article/details/124772869