关于一个css布局的小记录

这里我们采用一种最简单的 方式，至少我目前认为最简单的方式，使用flex布局来实现

下面是html结构：

 <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>

下面是css代码：

<style>
    *{
        margin: 0;
        padding：0;
    }
        .box1{
            /*定义该容器为伸缩容器*/
            display: flex;
            /*设置主轴对齐方式：两端对齐*/
            justify-content: space-between;
            /*宽度可以随便指定*/
            width: 100%;
            background-color: blue;
            /*高度也是随便指定*/
            height: 400px;
        }
        .box1>div{
            width: 25%;
            height: 50px;
            /*规定项目将相对于其他灵活的项目进行扩展的量*/
            flex-grow:1;
            background-color: pink;
        }
        .box3{
            /*让中间的盒子相对两边的盒子间距20px*/
            margin: 0 20px;
        }
    </style>