flex换行后行间距“过大”是align-content: stretch默认拉伸整行所致，它将交叉轴剩余高度均分给各行，撑开子项造成视觉错觉；应改用align-content: flex-start关闭拉伸，再配合row-gap设置固定行距。
不是最后一行被拉伸，是整行被 align-content: stretch 拉高了——它把容器交叉轴剩余高度平均分给了每一行，包括最后一行。
align-content: stretch 是罪魁祸首
Flex 容器默认 align-content: stretch，但它只在满足三个条件时才生效：启用 flex-wrap: wrap、子项真实换行、容器在交叉轴（垂直方向）有富余高度（比如设了 height: 300px 而内容总高仅 120px）。此时浏览器会把剩余 180px 平均分给所有行，每行都被纵向撑开，子项随之拉伸——你看到的“最后一行变高”，其实是整行被分配了额外空间。
常见错误现象：
- 卡片高度不一致，最后一行看起来“歪斜”——其实是各行基线不同，
stretch拉伸后放大了错位 - 加了
margin-bottom却没效果——因为 margin 是子项内部间距，而拉伸发生在行块层级 - DevTools 里看到容器
height远大于content height，但子项明明没设height——这就是stretch在起作用
为什么 justify-content 对最后一行“无效”
justify-content 管的是单行内主轴对齐，不是“最后一行特殊处理”。设了 space-between，浏览器就按行独立计算：哪怕最后一行只有两个子项，它仍会把左右边距撑开，造成悬浮居中。这不是 bug，是规范定义的行为。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
想让最后一行左对齐，不能靠 justify-content: flex-start（它只影响起始位置，不改变行内分配逻辑），而要：
- 用
margin-right: auto加在.item:last-child上（前提是子项宽度固定、不拉伸） - 或用
::after伪元素占满剩余空间（需设flex: 0 0 100%+display: block） - 或直接放弃 Flex，改用
display: grid，行列控制更正交
row-gap 和 align-content 的根本区别
row-gap 是真正在两行之间插入固定像素空白；align-content 是控制多行整体在交叉轴上的分布方式（比如 space-around 或 flex-start），它不产生“间隙”，只是挪动行块位置。
所以：
- 要严格留出 12px 行间空白 → 用
row-gap: 12px+align-content: flex-start - 要让首尾行贴容器边缘、中间行等距 → 用
align-content: space-between - IE 不支持
row-gap→ 只能退化为子项margin-bottom+ 父容器负边距抵消
真正容易被忽略的是：align-content 是否生效，完全取决于容器交叉轴是否有“可分配的剩余空间”。很多情况下你以为它失效了，其实只是容器高度由内容撑开（height: auto），压根没空间可分——这时候调再多次也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
