flex布局设置一行显示多个，水平布局，自动换行

最新推荐文章于 2024-06-01 22:13:58 发布

viceen

最新推荐文章于 2024-06-01 22:13:58 发布

阅读量4.2k

点赞数 2

分类专栏： html和css 文章标签：前端 css3

本文链接：https://blog.csdn.net/weixin_44867717/article/details/133201032

版权

html和css 专栏收录该内容

16 篇文章 2 订阅

订阅专栏

flex布局设置一行显示多个，水平布局，自动换行

场景：一行固定显示几个列表模块：水平布局，自动换行

效果图：

在这里插入图片描述

代码

html

 <!-- 一行显示五条数据，多余的自动换行，从第二行再开始排列 -->
 <div class="box">
    <div class="list">列表1</div>
    <div class="list">列表2</div>
    <div class="list">列表3</div>
    <div class="list">列表4</div>
    <div class="list">列表5</div>
    <div class="list">列表6</div>
    <div class="list">列表7</div>
    <div class="list">列表8</div>
  </div>

css

.box {
	/* 父盒子设置为伸缩盒子*/
    display: flex;
    /* wrap:  在必要的时候进行换行*/
    flex-wrap: wrap;  
    /* flex-start:  默认从头开始排列*/
    justify-content: flex-start;
    border: 1px solid blue;
  }
  .list {
    color: red;
    /* 18%:  默认每一个列表占18%*/
    flex: 0 0 18%;
    height: 50px;
    line-height: 50px;
    background: orange;
    text-align: center;
    /* 右边距，默认使用css函数去计算 */
    margin-right: calc(10% / 4);
    margin-bottom: 20px;
  }
  /* 去除每行尾多余的边距 */
  .list:nth-child(5n) {
    margin-right: 0;
  }