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 两个属性。