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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-12-01

浏览次数：次

返回列表

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

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

在使用 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 个会自动换到下一行。