关于一个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>

巴特西

关于一个css布局的小记录

最新文章

热门文章