应按内容容器实际可用宽度设断点，优先用min-width，推荐三档：768px、1024px、1440px；flex方向切换需重置flex-basis和flex-shrink；慎用flex-wrap，gap兼容性差时用margin模拟；注意flex-basis单位和min-height缺失问题。
媒体查询断点怎么设才不踩坑
别一上来就写 @media (max-width: 768px) —— 这个值不是万能的，它只适配部分平板竖屏，但会漏掉很多折叠屏、小尺寸笔记本（比如 1280×800 的 Surface Go）和高 DPR 设备。真正该看的是内容容器的**实际可用宽度**，而不是设备像素。
- 优先用
min-width而非max-width，避免层叠冲突和维护困难 - 推荐三档断点：
@media (min-width: 768px)（小屏起）、@media (min-width: 1024px)（中屏）、@media (min-width: 1440px)（大屏），覆盖主流内容区宽度 - 避免在断点里重复定义 flex 方向；用
flex-direction: column替代强行改width+float
Flexbox 在不同断点下如何安全切换方向
很多人直接在媒体查询里写 flex-direction: column，结果发现子项高度失控或换行异常——根本原因是没重置 flex-basis 和 flex-shrink。
- 移动端竖排时，给直接子项加
flex: 1 1 auto，防止被压缩到看不见 - 桌面端横排时，若需等宽分布，用
flex: 1 1 0（注意第三个值是0，避免基线干扰） - 慎用
flex-wrap: wrap配合固定width；改用flex-basis: calc(33.333% - 1rem)+gap更可靠
.container {
display: flex;
flex-direction: column;
}
@media (min-width: 1024px) {
.container {
flex-direction: row;
}
.container > * {
flex: 1 1 0;
}
}flex-wrap 与 gap 在旧版 Safari 中的兼容性处理
gap 在 Safari 14.1+ 才完全支持 flex 容器，而 flex-wrap: wrap 在 iOS 12–13 上对 align-content 有渲染 bug，会导致多行间距错乱。
- 用
margin模拟gap：给子项加margin-right和margin-bottom，再用:last-child清除末尾项的冗余边距 - 避免依赖
align-content: space-between，改用align-content: flex-start+ 子项内margin-top: auto控制垂直对齐 - 如果必须用
flex-wrap，把换行触发条件从“内容撑开”改成显式控制：用min-width配合媒体查询强制换行
响应式 flex 布局中最容易被忽略的细节
多数人调完断点和方向就以为结束了，但真实项目里出问题最多的地方其实是 flex-basis 的单位选择和 min-height 的缺失。
立即学习“前端免费学习笔记（深入）”；
-
flex-basis: 300px在小屏下会溢出；换成flex-basis: min(300px, 100%)或flex-basis: 100%+max-width - 卡片类布局中，没设
min-height会导致文字少时高度塌缩，破坏网格对齐 - 使用
flex: 0 0 auto的项（如固定宽度侧边栏）要配合min-width: 0，否则文本过长时会撑破容器
flex 布局本身不解决内容流问题，媒体查询只是开关；真正决定体验的，是每个断点下 flex 各轴属性的协同取值，以及是否主动约束了子元素的伸缩边界。
