启用flex-wrap: wrap实现多行布局，结合align-content控制行间对齐方式，需设置容器高度，注意单行时使用align-items调整对齐。
在使用 Flex 布局时，当容器内的项目超出一行，我们可以通过
flex-wrap
和
align-content
配合实现多行
排列
，并控制行与行之间的对齐方式。这是构建
响应式布局
的关键技巧之一。
启用多行布局：flex-wrap
默认情况下，Flex 容器中的项目会尝试在一行内显示。要让项目在空间不足时换行，需要设置
flex-wrap: wrap
。
常见取值：
nowrap
：不换行（默认）
wrap
：允许换行，下一行在下方
wrap-reverse
：换行，但行的顺序反向（从下往上）
示例：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
控制多行对齐：align-content
只有当容器中存在**多行** Flex 项目时，
align-content
才会生效。它控制的是行与行之间的对齐和分布方式。
立即学习
“
前端免费学习笔记（深入）
”；
常用取值：
stretch
：各行拉伸以填满容器（默认）
flex-start
：所有行靠顶部对齐
flex-end
：所有行靠底部对齐
center
：所有行居中对齐
space-between
：行之间等距，首尾行贴边
space-around
：每行周围有相等间距
space-evenly
：所有行包括边缘间距完全均匀
示例：
实际应用示例
假设我们要做一个卡片网格，每行最多放 3 张卡，卡片自动换行并均匀分布。
这样，卡片会在一行放不下时自动换行，且整体从顶部开始排列。
注意事项
align-content
不作用于单行情况。如果只有一行项目，即使设置了
align-content: center
，也不会
垂直居中
。此时应使用
align-items
控制单行项目的交叉轴对齐。
确保 Flex 容器有明确的高度，否则
align-content
的多数效果无法体现。
基本上就这些。灵活运用
flex-wrap
和
align-content
，可以轻松实现多行
弹性布局
。
.container {
display: flex;
flex-wrap: wrap;
}
.container {
display: flex;
flex-wrap: wrap;
align-content: space-between;
height: 300px; /* 必须设置高度才能看到 align-content 效果 */
}
.grid {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: 16px;
height: 400px;
}
.card {
flex: 0 0 calc(33.333% - 16px); / 每行最多3个，减去间隙 /
background: #eee;
padding: 20px;
text-align: center;
}