CSS3flex布局

最新推荐文章于 2025-06-02 18:23:19 发布

司_尘

最新推荐文章于 2025-06-02 18:23:19 发布

阅读量143

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： CSS3 flex布局替代浮动方法

本文链接：https://blog.youkuaiyun.com/qq_40833779/article/details/84634498

前端专栏收录该内容

51 篇文章

订阅专栏

小编在学习CSS3时了解到弹性盒子以flex相关属性实现，flex布局某种程度上可以代替浮动而且比浮动有更好的自适应性，下面小编先来介绍一下他的相关用法（flex属性之中有很多很杂小编介绍的是一种常见的布局至于其他属性可以参考一下手册）。

被定义弹性的盒子就有两个主轴默认情况下向右向下当然可以调整我们先看一个案例

<style>
   *{
       margin: 0;
       padding: 0;
   }
   .box{
       margin: 100px auto;
       width:50px;
       border: 1px solid black;  /*给个边框看着明显一点*/
   }
   .inbox{
       list-style: none;
      width: 100%;
      display: flex;    /* 让该盒子变为弹性盒子 */
      flex-wrap: wrap;   /* 当一行满了时自动换行存放 */
      justify-content: space-between;  /* 内部元素两边贴紧中间间隔自适应*/
   }
   ul li{
       background-color: rgb(151, 29, 29);
       width: 20px;
       height: 20px;
       margin-bottom: 2px;
   }
</style>
<body>
    <div class="box">
        <ul class="inbox">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

效果图如下：