CSS flex-wrap 属性文档

CSS flex-wrap 属性用于控制 flex 容器中 flex 项目的换行行为。默认情况下，flex 容器中的 flex 项目会在同一行上布局，如果超出了容器的宽度，则会对项目进行缩放。而使用 flex-wrap 属性之后，我们可以控制项目是否可以换行，以及如何换行。

使用方式

flex-wrap 属性可以在布局时使用，以下是示例代码：

.container {
  display: flex;
  flex-wrap: wrap|nowrap|wrap-reverse;
}

取值

flex-wrap 属性有三个有效值，分别是：

wrap

当容器的宽度不足以容纳所有 flex 项目时，项目会自动换行，并在多个行内进行排列。

.container {
  display: flex;
  flex-wrap: wrap;
}

nowrap

容器中的 flex 项目不会换行，并在同一行内进行排列，当容器宽度不足以显示所有项目时，项目将缩小以适应容器。

.container {
  display: flex;
  flex-wrap: nowrap;
}

wrap-reverse

容器内的 flex 项目会在多行上进行排列，但是行的顺序会与 wrap 的方式相反。

.container {
  display: flex;
  flex-wrap: wrap-reverse;
}

兼容性

flex-wrap 属性的兼容性较好，大部分现代浏览器都可以支持该属性。以下是部分浏览器的兼容情况：

• Chrome：任何版本
• Firefox：任何版本
• Safari：7.1+ 及以上版本
• Opera：任何版本
• IE：不支持

示例

以下是一个简单的 flex 容器使用 flex-wrap 属性的示例：

<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 class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  height: 300px;
}

.item {
  width: 100px;
  height: 100px;
  background: #f0f0f0;
  margin: 10px;
}

在该示例中，我们使用了 3 行 3 列的布局，并使用 flex-wrap 属性控制项目可以自动换行。

总结

flex-wrap 属性可以控制 flex 项目在容器中的换行行为，有 wrap、nowrap 和 wrap-reverse 三种取值。该属性的兼容性较好，在布局中使用该属性可以使项目自适应容器的变化，提高页面的用户体验。