Flex布局设置一行显示多个

最新推荐文章于 2025-03-07 15:52:25 发布

发呆的小蔡°

最新推荐文章于 2025-03-07 15:52:25 发布

阅读量1.2w

点赞数 4

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

本文链接：https://blog.youkuaiyun.com/Shivy_/article/details/122131428

版权

css 专栏收录该内容

9 篇文章

订阅专栏

介绍

在前端的页面开发里，经常在写列表页的时候，要展示成一行固定显示几个列表；这种情况，最常使用 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;
  }