了解 CSS Flexbox 中的 wrap 属性

引言

CSS Flexbox（弹性盒子模型）是一种现代的布局模型，以过去的 float 和 position 布局为代表的布局方式饱受诟病，因为它们在处理复杂布局时常常会变得异常麻烦。

CSS Flexbox 提供了一种灵活的方式，让我们可以操纵布局，并解决了一些这些麻烦。本篇文章将着重讲解 Flexbox 的 wrap 属性。

Flexbox 布局

在深入了解 wrap 属性之前，我们需要回顾一下 Flexbox 布局的原理。Flexbox 容器是由一个父元素和其中的子元素组成。父元素（Flex 容器）可以设置 display: flex 属性，使其变为 Flexbox 容器。

Flexbox 容器的默认方向为水平。这意味着容器中的项目（Flex 项）将按照水平方向排列。

<div class="flexbox-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

CSS：

.flexbox-container {
  display: flex;
}

上面的代码会在浏览器中生成以下布局：

如上图所示，在默认情况下，Flex 项将水平排列。这是通过 flex-direction 属性设置的。Flexbox 有四个值可用于此属性，它们是：

1. row：默认值，Flex 项按水平方向排列。
2. row-reverse：Flex 项按水平方向逆向排列。
3. column：Flex 项按垂直方向排列。
4. column-reverse：Flex 项按垂直方向逆向排列。

Flexbox 的 Wrap 属性

在 Flexbox 布局中，wrap 属性决定了 Flex 项是否应该“换行”。

当 Flex 项的宽度超过 Flex 容器的宽度时，默认情况下，Flex 项将缩小自己的宽度以适应存放它的 Flex 容器。但是，当设置 wrap 属性时，Flex 项不再缩小，而是在下一行（或下一列）重新开始布局。

<div class="flexbox-container wrap">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
  <div class="flex-item">Item 4</div>
  <div class="flex-item">Item 5</div>
  <div class="flex-item">Item 6</div>
</div>

CSS：

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

将 flex-wrap 属性设置为 wrap 可以让 Flex 项在多行中分布，而不是挤压到同一行中。

上面的代码会在浏览器中生成以下布局：

如果您希望 Flex 项在同一个行中分配，并保持原始大小，则需要使用 nowrap 值。

深入研究 Flexbox Wrap 属性

wrap-reverse

wrap-reverse 值的行为与 wrap 值类似，不同之处在于 Flex 项的布局方向。当 wrap-reverse 值应用于 Flexbox 容器时，Flex 项将倒序排列。也就是说，从最后一个 Flex 项到第一个 Flex 项，而不是从第一个到最后一个。

wrap-flow

wrap-flow 值是 Flexbox 的最新属性之一，它可以将 Flex 项放在行中，并使它们按从右到左的顺序排列。

下面是一个示例：

<div class="flexbox-container wrap flow">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
  <div class="flex-item">Item 4</div>
</div>

CSS：

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

上面的代码会在浏览器中生成以下布局：

总结

Flexbox 是一个灵活、强大的布局模型，能够大大简化网页布局的复杂度。使用 wrap 属性时需要注意，它决定了 Flex 项是否应该换行，可通过更改 flex-wrap 的值来控制它的行为。wrap-reverse 和 wrap-flow 值提供了一些在布局的过程中更灵活的选项。

学习 Flexbox 不仅仅涉及 wrap 属性，还需要了解更多的 Flexbox 属性和值，以构建美观的网页布局。希望这篇文章对你掌握 Flexbox 有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c713d710032fedd3905f8e