Flex圣杯布局(简易)

顾伊

2022-05-22 265 阅读1分钟

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

如图:

圣杯布局原理

效果图如下

圣杯布局起源

In Search of the Holy Grail

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>

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

如下结构非常建议使用