flex布局怎么换行？

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

    Item 1

在这个例子中，当子元素的总宽度超出`.flex-container`的宽度时，超出的子元素会换行显示。

垂直Flex容器

如果你的flex容器是垂直的，并且想要子元素在超出容器高度时换行，同样可以使用flex-wrap属性：

.flex-container-vertical {
  display: flex;
  flex-direction: column; /* 垂直方向的flex容器 */
  flex-wrap: wrap;
}

注意事项

- 使用wrap或wrap-reverse时，要注意flex项目的大小可能会影响布局的最终结果。

- 子元素的align-content属性可以控制换行后的行之间的间距和对齐方式。

- 在某些情况下，你可能还需要调整子元素的宽度或使用媒体查询来优化不同屏幕尺寸下的布局。

通过合理使用flex-wrap属性，你可以灵活地控制flex布局中的换行行为，实现响应式设计。