css flex 自动换行

在 CSS 中，使用 `flex-wrap` 属性可以控制 flex 容器中的 flex 元素在主轴方向上的换行行为。

默认情况下，`flex-wrap` 属性的值为 `nowrap`，即不允许换行。如果需要在容器内自动换行，则应该将 `flex-wrap` 属性的值设置为 `wrap`。例如：

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

这样，在容器空间不足时，flex 元素就会自动换行到下一行。如果需要在容器内自动换行，并且希望按照一定的排序规则进行换行，则可以使用 `flex-flow` 属性，它相当于同时设置了 `flex-direction` 和 `flex-wrap` 两个属性。例如：

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

这样，flex 元素会在容器内按照从左到右的顺序排列，当容器空间不足时，会自动换行到下一行。

相关问题

html flex自动换行,css flex布局超长自动换行的示例代码

HTML代码：

<div class="flex-container">
  <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 class="flex-item">item 7</div>
  <div class="flex-item">item 8</div>
  <div class="flex-item">item 9</div>
</div>

CSS代码：

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

.flex-item {
  flex: 1 0 200px;
  margin: 10px;
  background-color: #ccc;
  text-align: center;
  line-height: 200px;
}

这段代码中，`.flex-container`是一个使用Flex布局的容器，设置了`flex-wrap: wrap`属性，表示子元素可以自动换行。`.flex-item`是容器中的子元素，设置了`flex: 1 0 200px`属性，表示子元素可以自动伸缩，但最小宽度为200px，同时设置了`margin: 10px`属性，表示子元素之间有10px的间隔。为了方便展示，我给`.flex-item`设置了一些背景颜色和文本样式。

display flex 自动换行

display:flex是CSS中的一个属性，用于创建弹性布局。它可以让元素按照一定的规则自动换行。

当使用display:flex时，子元素会按照一定的规则排列在父容器内。默认情况下，子元素会在一行上排列，如果子元素的总宽度超过了父容器的宽度，那么子元素会被压缩以适应父容器的宽度。

如果希望子元素自动换行，可以使用flex-wrap属性。flex-wrap有三个取值：
- nowrap：默认值，子元素不换行，会被压缩以适应父容器的宽度。
- wrap：子元素自动换行，超出父容器宽度的子元素会被放置到下一行。
- wrap-reverse：子元素自动换行，超出父容器宽度的子元素会被放置到上一行。

示例代码如下：

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

这样设置之后，当子元素的总宽度超过父容器的宽度时，子元素会自动换行。