flex-wrap: wrap 是换行的唯一开关，不设置则子元素永远不换行；默认 nowrap 会强制单行溢出，必须显式声明 wrap 才启用换行逻辑，且需父容器有明确宽度、子项可收缩。
flex-wrap: wrap 是换行的唯一开关，不设就永远不换行
Flex 容器默认 flex-wrap: nowrap，哪怕子元素总宽度远超容器，也只会压缩或溢出，绝不会自动折行。这不是浏览器 bug，是规范行为。
必须显式写 flex-wrap: wrap 才启用换行逻辑——它只决定“要不要另起一行”，不干预单行内怎么排。
- 设
flex-wrap: wrap-reverse会让新行从上方堆叠（主轴为row时），容易导致视觉错乱，调试时先确认是否真需要这个值 - 父容器没设明确宽度（如
width、max-width或受父级约束）时，flex-wrap: wrap可能完全不生效——容器自己撑开了，根本没“空间不足”这回事 -
flex: 1、width: 200px这类设置对触发换行无效；真正影响换行时机的是flex-basis和flex-shrink的组合：设flex: 0 0 200px比width: 200px更可靠
gap 比 margin 更适合控制换行后的行列间距
用 margin 给子项加间距，在换行场景下极易造成首尾留白不均、末行不对齐甚至布局错位——因为 margin 不会自动忽略容器边缘。
gap 是专为 Flex/Grid 设计的间隙控制属性，它只作用于子项之间，天然规避边缘问题。
立即学习“前端免费学习笔记（深入）”；
-
gap: 12px同时设置行间距和列间距；需要分别控制时写成row-gap: 12px; column-gap: 8px - 旧版浏览器不支持
gap（如 IE 完全不支持，Chrome 84+、Firefox 63+ 支持），若需兼容，得回退到margin+ 伪类清除首尾边距 -
gap不会影响align-content的计算逻辑，但会占用交叉轴空间，间接影响多行垂直分布高度
align-content 只在多行时生效，单行时它完全没用
align-content 控制的是“行与行之间”在交叉轴上的分布方式，比如 space-between 让首尾行贴边、中间行等距；但它对单行毫无作用——此时只有 align-items 管用。
常见误操作是给单行容器设 align-content: center，结果发现没变化，其实是根本没触发条件。
- 当
flex-direction: row时，交叉轴是垂直方向，align-content影响上下分布；flex-direction: column时则影响左右分布 -
align-content: stretch是默认值，但若子项设置了固定高度（如height: 100px），拉伸会被压制，实际效果取决于内容高度 - 末行元素少、想保持和满行一致的分布（比如
space-between），align-content无解——得靠伪元素填充或换用 Grid
justify-content 在多行下只管每行内部，不管行间关系
justify-content 始终只作用于“单行内所有子项”的主轴对齐，哪怕有 5 行，它也让每一行都独立按设定对齐，而不是把全部子项当一个整体来排。
所以当你看到末行左对齐、右边大片空白，不是 justify-content 失效了，而是它本来就不负责行与行之间的协调。
-
justify-content: space-evenly在末行最明显：它会让该行内元素+边缘间距完全均等，导致末行看起来“被拉宽” - 想让末行也填满，又不想改布局模型，可临时加一个透明占位
::after元素，并设content: ""+visibility: hidden+ 同样flex值 - 如果业务逻辑允许，Grid 布局在处理“等宽换行+末行对齐”时比 Flex 更直接，
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))配合justify-items就能避开大部分 Flex 换行陷阱
flex-wrap、容器尺寸约束、子项弹性参数三者是否协同；很多人调了半天对齐，最后发现根本没换行——先检查那行 flex-wrap: wrap 写没写对，再看父容器有没有真实宽度限制。 
