使用CSS中的flex-wrap提高响应性

介绍

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

Flexbox 和管理元素包装

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

div.parent {
  display: flex;
}

使元素成为 flex 容器就像在其 CSS 声明中添加 display: flex; 一样简单。

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

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

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

flex-wrap 的默认设置

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

对于这个例子，让我们首先从一个非 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-wrap 是 flexbox 简写 flex-flow 的一部分。

flex-flow 是替换 flex-wrap 和 flex-direction 的 flexbox 属性。

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) 在 IE9 之后也部分支持 flexbox 和 flex-wrap。

Flexbox 前缀

如今，为 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）特别不支持该属性。

要确定是否需要前缀，请查看 Can I Use 以获取有关浏览器支持的最新信息，特别是如果您支持旧版本的浏览器。