CSS | flex-wrap 属性

简介

flex-wrap 属性用于控制伸缩盒子（flexbox）的行或列的换行方式。

默认情况下，伸缩盒子的子元素都会尽量挤在一行或一列中。但如果容器的宽（高）度不够时，子元素则会自动缩小以适应宽（高）度。如果所有子元素在一行（列）上空间不够，那么部分子元素则会溢出容器。

通过使用 flex-wrap 属性，你可以控制子元素如何换行以避免溢出。

取值

flex-wrap 属性可以接受以下三种取值：

• nowrap（默认）：所有子元素都尽量挤在一行（列）中，即使宽（高）度不够；
• wrap：当所有子元素在一行（列）上空间不够时，部分子元素会自动换行，以适应宽（高）度；
• wrap-reverse：与 wrap 相同，但是子元素的顺序会倒序排列。

代码示例

所有子元素在一行（列）上

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

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

该示例中，所有子元素都会挤在 .container 容器中的一行（列）上。

子元素自动换行

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

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

该示例中，在 .container 容器宽度不够时，子元素会自动换行以适应宽度。

反转顺序并自动换行

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

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

该示例中，在 .container 容器宽度不够时，子元素会自动换行以适应宽度，并且他们的顺序会倒序排列。

结论

flex-wrap 属性是伸缩盒子布局中非常有用的一项属性，它可以很好地控制子元素在容器中的排列方式。记得使用 flex-wrap 属性时，需要在容器上设置 display: flex，否则该属性无效。