CSS Flexbox如何实现多行排列_flex-wrap wrap自动换行显示

flex-wrap: wrap 用于允许 flex 子元素自动换行；设置 display: flex 和 flex-wrap: wrap 后，子元素在一行放不下时会折行排列，结合 flex 宽度与 calc() 可控制每行数量，适用于卡片网格、标签组等多行布局场景。

在使用 CSS Flexbox 布局时，如果容器内的子元素总宽度超过容器宽度，默认情况下它们会被压缩或溢出。要让这些子元素自动换行显示，就需要用到 flex-wrap: wrap 属性。

flex-wrap: wrap 是什么？

flex-wrap 属性控制 flex 容器中的子元素是否可以换行以及如何换行。默认值是 nowrap，即所有项目都在一行显示。设置为 wrap 后，当一行放不下时，子元素会自动折行排列。

常用取值：

• nowrap：不换行（默认）
• wrap：允许换行，下一行在下方
• wrap-reverse：换行，但下一行在上方

实现多行排列的基本写法

要实现多行排列，需要给父容器设置 display: flex 和 flex-wrap: wrap。

立即学习“前端免费学习笔记（深入）”；

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 可选：设置子项之间的间距 */
}

.item {
  flex: 0 0 200px; /* 不伸缩，基础宽度 200px */
  height: 100px;
  background-color: #007acc;
  color: white;
  text-align: center;
  line-height: 100px;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

在这个例子中，每个子项宽 200px，容器宽度若只能容纳 3 个，则第 4 个会自动换到下一行。

Type

生成草稿，转换文本，获得写作帮助-等等。

83

查看详情

控制每行显示数量的小技巧

通过设置子项的宽度，可以控制每行显示几个元素。例如：

• 想每行显示 3 个：设 flex: 0 0 calc(33.33% - 10px)
• 想每行显示 4 个：设 flex: 0 0 calc(25% - 10px)

结合 gap 使用时，用 calc() 能更精确地处理间距占用的空间。

常见应用场景

这种多行 flex 布局非常适合以下场景：

• 图片或卡片网格展示（如商品列表）
• 标签、按钮组的自适应排列
• 表单字段的响应式布局

相比传统浮动或 inline-block 布局，flex-wrap 更灵活，无需清除浮动，也更容易垂直对齐。

基本上就这些。只要记住：开启换行必须加 flex-wrap: wrap，再配合合适的子项宽度，就能轻松实现自动换行的多行布局。

以上就是CSS Flexbox如何实现多行排列_flex-wrap wrap自动换行显示的详细内容，更多请关注php中文网其它相关文章！