Css入门: flex-wrap（换行方式）

在CSS中，flex-wrap属性用于控制flex容器中的flex项如何换行。默认情况下，flex容器中的flex项会在一行上排列，如果一行放不下所有的flex项，它们会被压缩以适应容器的宽度。但是，有时候我们希望flex项能够自动换行，这时就可以使用flex-wrap属性。

flex-wrap属性的取值

flex-wrap属性有三个取值：

nowrap：默认值，表示flex项不换行，会被压缩以适应容器的宽度。
wrap：表示flex项自动换行，当一行放不下所有的flex项时，会自动换行。
wrap-reverse：表示flex项自动换行，但是换行的顺序与正常顺序相反。

使用flex-wrap属性

要使用flex-wrap属性，首先需要创建一个flex容器。可以通过设置容器的display属性为flex或inline-flex来创建一个flex容器。然后，在容器中添加flex项，可以使用flex属性来控制每个flex项的大小。

下面是一个示例：

<style>
  .container {
    display: flex;
    flex-wrap: wrap;
  }
  .item {
    flex: 1 0 200px;
    height: 100px;
    margin: 10px;
    background-color: #f2f2f2;
  }
</style>

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

在上面的示例中，我们创建了一个flex容器，并设置了flex-wrap属性为wrap，这样当容器的宽度不足以容纳所有的flex项时，它们会自动换行。每个flex项的大小由flex属性控制，这里我们设置了flex: 1 0 200px，表示每个flex项的宽度为200px，高度为100px。