flex-wrap: wrap 是多行布局的必要前提，不设则子项强制单行溢出，justify-content 和 align-content 均无效；必须显式声明才能触发换行逻辑，并配合 align-content 控制行间分布、justify-content 管理每行内对齐。
flex-wrap: wrap 是多行布局的前提
不设 flex-wrap: wrap，再多子项也只挤在一行里——justify-content 和 align-content 都不会生效。默认是 nowrap，哪怕容器宽度明显不够，浏览器也会强行横向溢出或缩小字体来撑住。
必须显式声明换行才能触发多行逻辑：
-
flex-wrap: wrap：正常换行，新行从主轴起点开始（如flex-direction: row时从左到右、从上到下） -
flex-wrap: wrap-reverse：反向换行，新行会叠在上一行上方（垂直方向上向上堆） - 别用
display: inline-flex+flex-wrap搭配，它对换行支持不稳定，尤其在内联上下文中容易截断
align-content 控制的是“行”之间的空间分配
align-content 不管单个子项怎么排，它只管“所有行”作为一个整体，在交叉轴（cross axis）上的位置和间距。比如 flex-direction: row 时，交叉轴是垂直方向，align-content 就决定这些行在容器高度里怎么分布。
常见取值的实际效果：
-
align-content: stretch（默认）：行被拉伸填满整个交叉轴，前提是容器有明确高度（如height: 400px） -
align-content: center：所有行整体居中，上下留白相等 -
align-content: space-between：首行贴顶、末行贴底，中间行等距分布 -
align-content: space-around：每行上下各留一份空隙，视觉上首尾空隙只有行间空隙的一半
注意：align-content 在只有一行时完全无效——哪怕你写了也没反应。
justify-content 对多行只作用于“当前行”，不是整块内容
很多人误以为 justify-content: flex-end 能让最后一行右对齐，其实它只影响每行内部的子项对齐。如果某行只有两个子项，justify-content: space-between 会让它们左右撑开；但下一行还是从左开始，不会自动右移。
想实现“最后一行右对齐”这类需求，justify-content 无解，得换思路：
- 给最后一个子项加
margin-left: auto，它会把该项推到本行末端（仅限单行有效） - 把不同对齐需求的子项拆到不同
display: flex容器里，比如前两行用justify-content: flex-start，最后一行单独包一层并设justify-content: flex-end - 用
gap+margin组合微调，比死磕justify-content更可控
flex: 1 在多行场景下仍按单行计算剩余空间
flex: 1 的行为不因换行改变：它始终基于「当前行内剩余空间」做分配，而不是整容器的宽度。如果第一行有三个子项设了 flex: 1，它们均分该行宽度；第二行同样三个，也各自均分第二行宽度——两行之间互不影响。
容易踩的坑：
- 父容器没设
width或max-width，导致每行可用宽度不可预测，flex: 1分配结果飘忽 - 子项有
margin或border，且box-sizing是content-box，实际占用宽度超出flex-basis，挤压了可分配空间 - 混用
width和flex-basis：后者优先级更高，width会被忽略（除非flex设为none）
真正需要跨行统一分配宽度时，Flex 不是最佳选择——这时候该考虑 display: grid 或 JS 计算后手动设宽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
