css 弹性盒四个换行

CSS弹性布局（Flexbox）是一种用于创建灵活、响应式的容器和其内容排列的工具，它有四种基本的换行策略：

1. `nowrap` (默认值): 这是默认的换行模式，元素不会换到下一行，如果内容超过容器宽度，则会沿着主轴（一般是横向）溢出。

2. `wrap`: 当元素无法在同一行显示完时，它们将开始换行到下一行。这是最常用的换行模式，适合单列布局，能自适应屏幕大小。

3. `wrap-reverse`: 类似于`wrap`，但是换行的方向是从右向左，适合需要从尾部开始展示内容的情况。

4. `flex-wrap`: 这个属性已经过时了，现在应该直接使用`wrap`或`wrap-reverse`。`flex-wrap`实际上是`wrap`的同义词。

你可以通过设置`.display-flex`和`.flex-wrap`属性来控制弹性盒子的换行方式，并结合`.flex-direction`改变主轴方向（水平或垂直），从而创建所需的效果。例如：

.container {
  display: flex;
  flex-wrap: wrap; /* 或者 flex-wrap: wrap-reverse; */
}