CSS Flex自动换行

1. 什么是CSS Flex?

CSS Flex（Flexbox）是一种用于布局的CSS属性，它可以方便地创建灵活的、响应式的布局。Flex容器中的子元素可以根据设定的规则自动调整自己的位置和大小，实现灵活多样的排列方式。其中一个重要的特性就是自动换行，可以根据容器的大小自动换行排列子元素。

2. Flex容器与Flex子元素

在使用CSS Flex实现自动换行之前，我们先来了解Flex容器和Flex子元素的概念。

Flex容器（Flex Container）：设置了display: flex或者display: inline-flex的元素被称为Flex容器。Flex容器的作用是创建一个Flex布局上下文，子元素的布局就是在这个上下文中进行。
```
<div class="container">
...
</div>
```
```
.container {
display: flex; /* 或者 display: inline-flex */
}
```

Flex子元素（Flex Item）：Flex容器中的每个直接子元素都被称为Flex子元素。子元素的布局是相对于父容器进行的。

<div class="container">
<div class="item">子元素1</div>
<div class="item">子元素2</div>
...
</div>

.container {
display: flex;
}
.item {
...
}

3. 实现Flex自动换行

Flex自动换行的实现需要借助flex-wrap属性。flex-wrap属性定义了Flex容器中子元素是否换行，以及如何换行。

flex-wrap: nowrap;：默认值，子元素不换行，会尽量在一行显示。
flex-wrap: wrap;：子元素会自动换行，并向下移动到新的行。
flex-wrap: wrap-reverse;：子元素会自动换行，并向上移动到新的行。

在示例代码中，我们创建一个Flex容器，并设置flex-wrap: wrap;，使得子元素可以自动换行。

<div class="container">
  <div class="item">子元素1</div>
  <div class="item">子元素2</div>
  <div class="item">子元素3</div>
  ...
</div>

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

4. 设置子元素的宽度

在使用Flex自动换行时，需要设置子元素的宽度，否则子元素会默认占据全部可用空间。可以根据需要设置子元素的具体宽度，也可以使用flex-basis属性设置子元素的基本宽度。

flex-basis: auto;：默认值，子元素的基本宽度根据内容进行自动调整。
flex-basis: <length> | <percentage>;：可以设置具体的宽度值，如像素值、百分比等。

在示例代码中，我们设置子元素的基本宽度为200px。

.item {
  flex-basis: 200px;
}

5. 子元素自动换行的效果

通过设置Flex容器的flex-wrap: wrap;属性和子元素的宽度，可以实现子元素的自动换行效果。当子元素占据的总宽度超过父容器的宽度时，子元素会自动换行到新的行。

下面是一个示例代码，展示Flex自动换行的效果：

<div class="container">
  <div class="item">子元素1</div>
  <div class="item">子元素2</div>
  <div class="item">子元素3</div>
  <div class="item">子元素4</div>
  <div class="item">子元素5</div>
  <div class="item">子元素6</div>
  <div class="item">子元素7</div>
  <div class="item">子元素8</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex-basis: 200px; /* 设置子元素的基本宽度为200px */
  height: 100px; /* 设置子元素的高度为100px */
  background-color: #f1f1f1; /* 设置子元素的背景颜色 */
  margin: 10px; /* 设置子元素之间的间距为10px */
  text-align: center; /* 设置子元素的文本水平居中 */
  line-height: 100px; /* 设置子元素的文本垂直居中 */
}

上述示例代码中，子元素的宽度被设置为200px，当容器宽度不足以容纳所有子元素时，子元素会自动换行并向下移动到新的行。

6. Flex自动换行与子元素高度

在Flex自动换行的情况下，子元素的高度会根据内容自动调整，也可以通过设置flex-grow属性来调整子元素的高度。

flex-grow: <number>;：指定了子元素在存在剩余空间时，将该剩余空间按一定比例分配给子元素。默认值为0，即不分配剩余空间。
- 当所有子元素的flex-grow都设置为1时，剩余的空间将按比例分配给每个子元素。
- 当一个子元素的flex-grow为1，其他子元素的flex-grow为0时，这个子元素会占据剩余所有的空间。

下面是一个示例代码，展示Flex自动换行的同时，子元素的高度根据内容自适应，并通过设置flex-grow属性来调整子元素的高度：

<div class="container">
  <div class="item">子元素1</div>
  <div class="item">子元素2</div>
  <div class="item">子元素3</div>
  ...
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex-basis: 200px;
  flex-grow: 1; /* 设置子元素的flex-grow为1，根据剩余空间等比例分配高度 */
  height: auto; /* 设置子元素的高度自适应内容 */
  background-color: #f1f1f1;
  margin: 10px;
  text-align: center;
  line-height: 100px;
}