flex文字自动换行

Flex布局中的文字自动换行，通常通过设置容器的`flex-wrap`属性为`wrap`或`wrap-reverse`来实现。当元素的总宽度超过了容器的可用空间，并且`flex-wrap`设为了换行模式，那么超出的部分会换到下一行显示。

- `flex-wrap: wrap;` 表示元素会换到下一行，新的一行从左开始。
- `flex-wrap: wrap-reverse;` 则是从右往左换行。

同时，可以配合`flex-direction`属性控制主轴方向，来调整文字在列的方向。例如，`flex-direction: column`会让内容垂直排列，而`flex-direction: row`则保持水平方向。

为了确保文本能正常换行并自适应，还需要给包含内容的容器设置`display: flex`以及合理的`flex-grow`, `flex-shrink`, 和 `flex-basis`值。