使用flex-wrap和align-content可构建自适应卡片布局：flex-wrap: wrap实现换行，使卡片在不同屏幕下自动排列；align-content控制多行对齐方式，优化垂直空间分布，结合flex-basis与min-width，无需复杂媒体查询即可实现响应式效果。
在响应式网页设计中，卡片布局被广泛用于展示产品、文章或用户信息。使用CSS Flexbox可以高效构建灵活且自适应的卡片排列方式。其中，flex-wrap 和 align-content 是控制多行卡片排列行为的关键属性。合理应用这两个属性，能显著提升布局在不同屏幕尺寸下的视觉效果和可用性。
flex-wrap：控制换行以实现响应式流式布局
默认情况下，Flex容器中的项目不会换行，所有子元素会尝试挤在同一行内，可能导致内容溢出或压缩变形。通过设置 flex-wrap: wrap，可以让卡片在空间不足时自动换行，形成多行布局。
常见用法如下：
.card-container {
display: flex;
flex-wrap: wrap;
gap: 16px; /* 推荐使用 gap 处理间距 */
}
.card {
flex: 1 1 250px; /* 最小宽度约 250px，可伸缩 */
}
这样，每个卡片最小宽度为250px，在大屏幕上可并排显示多列，小屏幕上则自动折行，无需媒体查询即可实现基本响应式效果。
立即学习“前端免费学习笔记（深入）”；
align-content：优化多行之间的对齐与分布
当容器启用了 flex-wrap: wrap 且存在多行时，align-content 决定这些行在交叉轴上的分布方式。它只在有多余垂直空间或多行时生效。
常用取值及适用场景：
- align-content: stretch —— 默认值，各行拉伸填满容器高度，适合卡片高度一致的场景
- align-content: flex-start —— 所有行靠顶部对齐，适合内容长度不一但希望紧凑排列的情况
- align-content: space-between —— 行之间均匀分布，首尾行贴边，适合全高容器中营造呼吸感
- align-content: space-around —— 每行周围分配相等空间，视觉更松散舒适
例如，在一个固定高度的卡片区域中，使用 space-between 可避免底部大片空白：
.card-container {
display: flex;
flex-wrap: wrap;
align-content: space-between;
height: 500px;
}
结合 flex-grow、flex-basis 实现智能列数控制
仅靠 flex-wrap 不足以精细控制每行卡片数量。配合 flex-basis 设置建议宽度，再结合 flex-grow: 1，可让卡片根据容器动态调整。
例如，希望在桌面端每行最多4张，平板3张，移动端1~2张：
.card {
flex: 1 1 200px; /* 基础宽度 200px，允许增长 */
}
当容器宽度变化时，浏览器会自动计算每行可容纳的数量。搭配 min-width 可防止卡片过窄：
.card {
min-width: 180px;
}
基本上就这些。通过合理使用 flex-wrap 和 align-content，配合弹性伸缩设置，可以构建出无需复杂媒体查询的自适应卡片布局。关键是理解行的生成机制和多行对齐逻辑，让布局自然响应屏幕变化。
