要实现多行 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 容器中的子元素在空间不足时自动换行。这样就能创建灵活的多行布局，适用于卡片、网格列表等场景。
默认情况下，Flex 容器内的项目不会换行。需要设置容器的 flex-wrap: wrap 来允许换行：
这两个属性可以合并为 flex-flow: row wrap;，更简洁。
子元素的宽度决定了它们何时换行。常见做法是给子项设置固定宽度或百分比宽度：
立即学习“前端免费学习笔记（深入）”；
使用 flex-basis 可以更灵活地控制每个项目占据的空间。
当项目换行后，可以通过以下属性控制行与行之间的对齐：
注意：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 和合适的宽度控制，再配合对齐属性就能实现各种多行效果。
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
1000
收藏
