Flex容器默认不换行，关键在于flex-wrap属性（默认nowrap）；开启wrap后子项仍不换行需检查flex-shrink和宽度设置；多行对齐用align-content而非align-items。
flex容器默认不换行，flex-wrap 才是关键开关
Flex布局中元素是否换行，**不由 display: flex 决定，而由 flex-wrap 属性控制**。默认值是 nowrap，所有子项强行挤在一行，哪怕溢出容器也不折行。
常见错误是只设了 display: flex 就以为能自动换行，结果内容被裁剪或横向滚动——这时候该查的不是子项样式，而是父容器的 flex-wrap。
-
flex-wrap: nowrap：强制单行（默认，不换行） -
flex-wrap: wrap：按需换行，新行从主轴起点开始（常用） -
flex-wrap: wrap-reverse：换行但新行从主轴终点开始（比如主轴为 row 时，第二行在第一行上方）
flex-wrap: wrap 下子项仍不换行？检查 flex-shrink 和宽度
即使开了 wrap，子项也可能“拒绝换行”，典型表现是内容撑宽容器、出现横向滚动条。
根本原因常是：flex-shrink: 1（默认）让子项在空间不足时主动缩小，而不是换行；或者子项设置了固定宽度（如 width: 300px）且总和未超容器，但实际因边距/内边距/边框导致溢出。
立即学习“前端免费学习笔记（深入）”；
- 想优先换行而非压缩，给子项加
flex-shrink: 0 - 用
min-width: 0防止内容（如长单词、URL）撑开子项 - 避免对 flex 子项设死宽度，改用
flex: 1或flex: 0 0 auto控制伸缩行为
换行后行间距与对齐：用 align-content 而非 align-items
align-items 控制的是**单行内**子项在交叉轴上的对齐方式；而换行后，多行之间如何分布，得靠 align-content。
如果开了 wrap 却发现行与行紧贴顶部、中间空一大片，大概率是忘了设 align-content。
-
align-content: stretch（默认）：各行填满交叉轴剩余空间 -
align-content: center：多行整体居中（垂直居中） -
align-content: space-between：首尾行贴上下边缘，其余等距分布 - 注意：
align-content在单行时无效，此时只能靠align-items
响应式换行控制：媒体查询 + flex-wrap 切换
移动端常需「小屏单行滚动，中屏两列，大屏三列」，直接靠 flex-wrap 不够，得配合 flex-basis 或 width + 媒体查询。
例如实现「最多每行两个卡片，小屏强制单行」：
.container {
display: flex;
flex-wrap: wrap;
}
.card {
flex: 1 1 calc(50% - 10px); /* 每行最多2个，留间隙 */
margin: 5px;
}
@media (max-width: 768px) {
.card {
flex: 1 1 100%; /* 小屏下占满整行 */
}
}这里关键是：换行逻辑由 flex-wrap 提供基础能力，具体每行几个，靠子项的 flex-basis 或 width 触发断点——别指望仅靠 flex-wrap 自动算列数。
真正容易被忽略的是：换行后，justify-content 对齐的是**每行内部**，而 align-content 才管**行与行之间**；很多人调了半天 justify-content 发现没用，就是因为其实该动的是 align-content。
