flex-wrap必须设为wrap，否则子项强行挤在一行导致响应式失效；配合flex-direction: row使用，column下wrap无意义；移动端建议默认设置，并注意Safari兼容性及子项宽度触发条件。
Flexbox容器的flex-wrap属性为什么必须设为wrap
不设 flex-wrap: wrap 时，子项会强行挤在一行，超出视口也不换行，响应式就失效了。尤其在小屏下，内容被裁剪或出现横向滚动条，用户根本看不到完整布局。
实际用法中，flex-wrap 要和 flex-direction: row（默认值）配合使用；如果设成 column，再加 wrap 就没意义——列方向无法“换列”。
- 移动端优先开发时，建议默认写
flex-wrap: wrap，后续媒体查询里不用反复覆盖 - 某些旧版 Safari（iOS 9–10）对
flex-wrap: wrap-reverse支持不稳定，生产环境避免使用 - 当子项设置了固定宽度（如
width: 200px），wrap才真正触发换行；纯flex: 1且无最小宽度限制时，可能始终不折行
媒体查询中哪些断点值最实用且兼容性好
别迷信“标准断点”，实际项目里用设备逻辑比像素数字更可靠。主流框架（如 Bootstrap）的断点本质是经验沉淀，不是技术强制要求。
推荐三档起步，覆盖绝大多数场景：
立即学习“前端免费学习笔记（深入）”；
-
@media (max-width: 576px)：窄屏手机竖屏（iPhone SE、老安卓小屏），此时常切换为单列堆叠 + 增大内边距 -
@media (min-width: 577px) and (max-width: 992px)：平板横屏、折叠屏半展开、大屏手机横屏。适合两列布局，flex-direction: row保持，但调整flex-basis或子项数量 -
@media (min-width: 993px)：桌面端起点，可启用三列、侧边栏等复杂结构
注意：576px 和 992px 是整数，避开某些 Android WebView 对小数断点解析异常的问题；也避免用 768px——iPad 竖屏是 768px，但很多安卓平板也是这个分辨率，却未必是平板体验，容易误判。
