Flex 布局换行 - 如何让子元素自动换行？

在 flex 布局中，当容器的宽度不足以容纳所有的子元素时，子元素默认会挤到一行显示。不过，你可以通过设置 'flex-wrap' 属性来控制布局是否换行。

'flex-wrap' 属性有以下几个取值：

1. 'nowrap'（默认值）：不换行，子元素会被挤到一行显示，可能会导致溢出。
2. 'wrap'：换行，如果子元素的宽度超过容器的宽度，会自动进行换行显示。
3. 'wrap-reverse'：反向换行，与 'wrap' 类似，但是子元素会从容器的尾部开始排列。

例如，下面的代码将容器设置为 flex 布局，并设置 'flex-wrap' 属性为 'wrap'：

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

这样，当子元素的宽度超过容器的宽度时，会自动进行换行显示。