Flexbox属性之Flex-wrap

一、Flex-wrap的概念

Flex-wrap属性决定了Flex容器中Flex items是否可以换行，以及如何换行。默认情况下，flex items会在同一行上排列，并占用整个可用空间，但是当它们的宽度超过了容器的宽度时，它们将不得不尝试去适应容器的大小，并在该行上压缩。如果Flex-wrap属性设为“wrap”，flex items自动分布在多行上，而不是在一行上。

二、Flex-wrap的属性值

Flex-wrap 有三个取值：

• nowrap：默认情况下，flex items都位于同一行上，如果空间不足，会自适应缩小。
• wrap：如果空间不足的话，Flex items自动换行到下一行。
• wrap-reverse：如果空间不足的话，Flex items自动从下一行开始换行并向上对齐。

三、使用示例

下面的例子演示了不同的Flex-wrap值的效果，代码如下：

  <div class="flex-container" style="display: flex; flex-wrap: wrap;">
    <div class="flex-item item-1">Item 1</div>
    <div class="flex-item item-2">Item 2</div>
    <div class="flex-item item-3">Item 3</div>
    <div class="flex-item item-4">Item 4</div>
    <div class="flex-item item-5">Item 5</div>
    <div class="flex-item item-6">Item 6</div>
    <div class="flex-item item-7">Item 7</div>
    <div class="flex-item item-8">Item 8</div>
    <div class="flex-item item-9">Item 9</div>
  </div>

上面的代码创建了一个Flex容器，并将Flex-wrap设为“wrap”。

以下是Flex容器的样式，它定义了容器中的五个Flex items:

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

  .flex-item {
    background: #ccc;
    color: #fff;
    font-size: 30px;
    text-align: center;
    line-height: 100px;
    margin: 10px;
  }

  .item-1 {
    flex: 1 1 200px;
  }

  .item-2 {
    flex: 2 2 200px;
  }

  .item-3 {
    flex: 1 1 200px;
  }

  .item-4 {
    flex: 2 2 200px;
  }

  .item-5 {
    flex: 1 1 200px;
  }

  .item-6 {
    flex: 1 1 200px;
  }

  .item-7 {
    flex: 1 1 200px;
  }

  .item-8 {
    flex: 1 1 200px;
  }

  .item-9 {
    flex: 1 1 200px;
  }

Flex-wrap属性被设置为“wrap”，所以Flex items被允许在多行上显示，如果所有Flex items不能完整地放在一行中，则它们将自动分配在下一行上。

我们可以尝试改变Flex-wrap属性的值，比如将它设置为“nowrap”或“wrap-reverse”，看看它们的效果。

四、小结

Flex-wrap属性决定了Flex容器中的Flex items是否可以换行，以及如何换行。默认情况下，Flex items会在同一行上排列，如果Flex items在一行上不能容纳下，则缩小它们以适应空间。但是，当Flex-wrap属性被设置为“wrap”时，Flex items将自动分配到多个行上，从而使它们更好的适应空间。