关于一个css布局的小记录

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

下面是html结构：

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

下面是css代码：

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