css flex 三列显示 并且可以换行

可以使用 CSS 的 flex 布局来实现三列显示并且可以换行。

首先，在父元素上设置 flex 布局：

.container {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
}

然后在三个子元素上设置 flex 属性，使它们平均分布在父元素的宽度中：

.item {
  flex: 1; /* 每个子元素占据父元素等量的空间 */
}

最后，可以根据需要设置每个子元素的宽度、高度等样式。

完整代码如下:

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex: 1;
  /* other styles */
}

这样三个子元素就会在一行中平均分布，如果父元素宽度不够则会换行显示

其中 flex-wrap 可以控制是否允许换行，默认是不允许换行。当子元素数量超过父元素宽度时，如果不设置 flex-wrap: wrap; 会溢出

另外，还可以使用 flex-flow 属性来简写 flex-wrap 和 flex-direction 两个属性。

相关问题

css flex-warp 如何紧贴着换行

要使 flex 容器中的项目紧贴着换行，你可以使用 `align-content` 属性。`align-content` 属性用于设置项目在交叉轴上的对齐方式，并影响换行行为。

如果你想要项目紧贴着换行，可以将 `align-content` 设置为 `flex-start` 或 `flex-end`。具体取决于你希望项目对齐在顶部还是底部。

以下是一个示例：

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start; /* 或者 align-content: flex-end; */
}

在上面的示例中，`.container` 是一个 flex 容器，设置了 `flex-wrap: wrap;` 来允许项目换行。然后，通过设置 `align-content: flex-start;` 或 `align-content: flex-end;` 来使项目紧贴着换行。你可以根据需要选择合适的对齐方式。

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 元素会在容器内按照从左到右的顺序排列，当容器空间不足时，会自动换行到下一行。