如何通过css实现多行flex布局

要实现多行 Flex 布局，需设置 flex-wrap: wrap 使子元素换行。1. 启用 display: flex 和 flex-wrap: wrap 或简写为 flex-flow: row wrap；2. 子项通过 width、flex-basis 或 flex: 0 0 设置宽度以控制换行时机；3. 使用 align-content 调整多行对齐方式，如 stretch、flex-start、space-between 等，注意至少两行才生效。示例中容器使用 flex-flow: row wrap、gap 间距和 align-content: flex-start，子项设 flex: 0 0 200px 实现响应式多行布局。核心是 flex-wrap 与宽度配合。

要实现多行 Flex 布局，关键在于使用 flex-wrap: wrap 属性，让 Flex 容器中的子元素在空间不足时自动换行。这样就能创建灵活的多行布局，适用于卡片、网格列表等场景。

1. 启用换行功能

默认情况下，Flex 容器内的项目不会换行。需要设置容器的 flex-wrap: wrap 来允许换行：

这两个属性可以合并为 flex-flow: row wrap;，更简洁。

2. 设置子项宽度控制换行时机

子元素的宽度决定了它们何时换行。常见做法是给子项设置固定宽度或百分比宽度：

使用 flex-basis 可以更灵活地控制每个项目占据的空间。

3. 多行对齐方式调整

当项目换行后，可以通过以下属性控制行与行之间的对齐：

注意：align-content 在只有一行时无效，至少需要两行才起作用。

完整示例代码

一个典型的多行 Flex 布局写法：

.container {
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
  align-content: flex-start;
}

.item {
  flex: 0 0 200px;
  height: 100px;
  background: #007acc;
  color: white;
}

这样无论屏幕大小如何变化，项目都会自动换行排列，形成响应式多行布局。

基本上就这些。核心是 flex-wrap: wrap 和合适的宽度控制，再配合对齐属性就能实现各种多行效果。