浅谈css圣杯布局

简单的圣杯布局就是在一个横向的大盒子里使其左右的盒子固定宽高中间自适应。如图

首先建立一个大盒子包三个子盒子的结构

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

清除内外边距并给每个盒子设置宽高并加上背景色(中间盒子只用给高度)

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            height: 50px;
            background-color: aquamarine;
        }

        .left,
        .right {
            width: 50px;
            height: 50px;
            background-color: aqua;
        }

        .center {
            background-color: bisque;
        }
    </style>

接下来给大盒子加上弹性容器

        .box {
            height: 50px;
            /*弹性容器*/
            display: flex;
            background-color: aquamarine;
        }

然后让中间盒子占父盒子剩下的全部内容

        .center {
        /*占据父盒子剩下的部分*/
            flex: 1;
            background-color: bisque;
        }

圣杯布局是移动端布局中极其重要的一部分

如图结构摆放用到了极其多的圣杯布局.