flexbox 中元素自动换行需显式设置 flex-wrap: wrap 或 wrap-reverse；仅设 display: flex 不触发换行，易致横向溢出；配合 min-width: 0 和 gap 可确保响应式缩放与间距控制。
flexbox 布局如何让元素自动换行？
关键在 flex-wrap 属性。默认值是 nowrap，所有子项强行挤在一行，超出容器也不折行。要实现“自动排列”，必须显式设为 wrap 或 wrap-reverse。
常见错误：只设了 display: flex 就以为能自适应，结果小屏幕下内容横向溢出、滚动条出现，根本没触发换行。
-
flex-wrap: wrap—— 溢出时新起一行，从主轴起点开始（通常从左到右） -
flex-wrap: wrap-reverse—— 新行堆叠在上一行下方（或上方，取决于flex-direction） - 搭配
justify-content控制每行内对齐，但注意它只影响“当前行”，不控制行与行之间的间距
响应式断点中该调整哪些 flex 属性？
不是所有 flex 属性都需要媒体查询干预。优先动的是 flex-direction 和 flex-wrap，其次是 justify-content 和 align-items，避免在每个断点里重写全部规则。
例如移动端竖排卡片、桌面端横排网格，只需改方向：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
@media (min-width: 769px) {
.container {
flex-direction: row;
}
}
注意：gap 在 flex 容器中兼容性良好（Chrome 84+、Firefox 63+、Safari 14.1+），老版本 Safari 需用 margin 模拟，但别在媒体查询里重复写 margin 逻辑——容易错位。
为什么 flex 项目在小屏幕上没按预期缩放？
根本原因是没约束子项的最小宽度。flex 默认会尊重子项的 min-width（比如图片原始宽、文字块撑开的宽），导致即使设了 flex: 1，它也不缩小。
解决方法统一加这条：
.flex-item {
min-width: 0;
flex: 1;
}
常见场景包括：
- 卡片内含长文本或 URL，不设
min-width: 0会导致整行卡住不换行 - 图片未设置
max-width: 100%，flex 缩放失效 - 使用
flex: 0 1 auto时，auto仍可能取内容固有宽，需配合min-width: 0才真正“可收缩”
gap 和 margin 混用会破坏 flex 排列吗？
会。尤其当同时用 gap 和子项的 margin 时，间隙会叠加，且在 flex-wrap 换行后，末尾项的 margin 可能撑出多余空白，破坏对齐。
建议原则：
- 优先用
gap控制 flex 项目间间距（包括换行后的行间距） - 完全去掉子项的
margin，除非需要特定边距（如第一项左边、最后一项右边） - 若必须用 margin（比如兼容旧浏览器），请确保只设单边（如
margin-right+margin-bottom），并用:nth-child()清除末尾项的冗余 margin
最易被忽略的一点：flex 容器的 gap 不作用于容器自身 padding 内侧，但 margin 是外侧的；二者层级不同，混用时视觉节奏容易失控。
