介绍

该flex-wrap属性是一种使父元素在各种屏幕尺寸上更具响应性的快速方法。与一般的 flexbox 一样，它简化了页面布局，因此您不必手动设置断点或自己管理页面溢出。

Flexbox 和管理元素包装

flex-wrap是 CSS 中 flexbox（或“flexible box”）模块特有的属性。Flexbox 是一种 CSS 布局模型，用于管理子元素在父元素中的显示方式。这意味着 flexbox 可用于一般页面布局（如页眉、导航、页脚等）。但更重要的是，它可以应用于页面上具有子元素的任何元素。

div.parent {
  display: flex;
}

使元素成为flex容器就像添加display: flex;到它的 CSS 声明一样简单。

一旦有一个flex容器，flex-wrap就可以在同一个父元素上声明，以确定如何处理默认情况下不适合一行的子元素。

div.parent {
  display: flex;
  flex-wrap: wrap;
}

在应用 flex-wrap 之前，父元素必须是一个 flex 容器。flex-wrap 属性仅应用于 flex 容器（而不是子元素）。

---

flex-wrap 的默认设置

默认情况下，flex容器将尝试将其子元素放在一行中。这也被称为nowrap对flex-wrap财产。

对于这个例子，让我们首先从一个非 flex 容器开始，其中的子元素——块元素——将每个都在一个新行上：

如果我们使父元素成为flex容器，则子元素将全部位于一行。

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

flex 容器的默认 flex-wrap 设置是“no-wrap”。这意味着您不需要像我们上面所做的那样明确声明它。

现在我们的子元素在一行上，但是，即使您的窗口没有足够的空间容纳它们，子元素也会留在一行上。随着窗口大小的变化，子元素将继续挤压在一起，直到它们最终溢出父元素。

那么，我们如何解决这个问题？随着flex-wrap！

了解您的 flex-wrap 选项

该flex-wrap属性有三个有效值：

• nowrap：这是flex容器的默认值，因此不需要显式声明它，除非您覆盖其他样式。子元素将始终保持在一行。
• wrap：使用wrap将允许您的子元素在不再适合初始行时换行到其他行。不适合的元素将环绕到父元素的左下角。
• wrap-reverse：这将导致wrap. 它不会将溢出的元素包装到左下角，而是换到父元素左上角第一个子元素上方的新行。

要看到的区别wrap和wrap-reverse，通过调整你的窗口下面的两个例子比较：

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

第一个示例将溢出的元素移至第一个子元素下方的新行。

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

第二个示例正好相反，将溢出的元素包装在第一个子元素上方。wrap-reverse不太常用，但在您的 CSS 工具包中使用它仍然很好。🥳

---

Flexbox 简写：flex-flow

如果您喜欢在尽可能少的行上编写代码，您会很高兴知道flex-wrapflexbox 速记的一部分flex-flow。

flex-flow是一个 flexbox 属性，用于替换flex-wrap和flex-direction。

flex-direction 快速介绍

flex-direction确定您的子元素应该在行中还是列中。四个选项是：row，column，column-reverse，和row-reverse。flex-direction 的默认值为row。

使用弹性流

flex-flow首先声明flex-direction父元素的，然后声明flex-wrap值。仅当您需要显式声明flex-direction和flex-wrap以与默认值不同时才应使用它。

这意味着您可以像这样编写这些 flex 属性：

.backwards-flex-container {
  flex-direction: row-reverse;
  flex-wrap: wrap-reverse;
}

或者使用flex-flow速记来获得相同的效果：

.backwards-flex-container {
  flex-flow: row-reverse wrap-reverse;
}

这个“向后”示例将子元素排成一行，但顺序相反（flex-direction）。它还将让溢出的孩子换行到第一行上方的新行。✨

flex-flow 是唯一一个专门包含 flex-wrap 的 flexbox 速记，但还有很多其他的。如果您更喜欢速记，大多数 flexbox 属性都有速记选项！💅

---

浏览器支持

一般来说，flexbox 和flex-wrap在所有现代浏览器中都得到很好的支持。甚至 Internet Explorer (IE) 也部分支持 flexbox 和flex-wrapIE9 之后。

弹性盒前缀

为 flexbox 使用前缀flex-wrap现在不太常见了，你是否使用它们取决于你试图支持的浏览器版本。

.parent {
  display: flex;
  display: -webkit-flex; /* old versions of Chrome/Safari/Opera */
  display: -ms-flexbox; /* IE10 */

  flex-wrap: wrap;
  -webkit-flex-wrap: wrap; /* old versions of Chrome/Safari/Opera */
}

请注意， flex-wrap 是 flexbox 的一项属性，某些旧版本的浏览器（例如 Firefox）特别不支持该属性。

要确定是否需要前缀，请查看我可以使用以获取有关浏览器支持的最新信息，尤其是在您支持旧版本浏览器的情况下。