flex-direction在媒体查询中不生效的根本原因是父容器未启用Flex布局，需检查display是否被覆盖为block或grid；响应式应优先用min-width而非only screen；column-reverse慎用于语义区域，推荐order属性；子项尺寸建议用flex-basis替代width。
flex-direction 在媒体查询中改不生效？检查 display: flex 是否被覆盖
很多情况下改了 @media 里的 flex-direction 却没反应，根本原因不是断点写错，而是父容器压根没生效 Flex 布局。比如用了 display: inline-flex 后又被其他样式（如重置 CSS 或组件库默认值）覆盖成 display: block，或者父元素有 display: grid 干扰。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具逐层检查父元素的最终
display计算值，确认是flex或inline-flex - 避免在同一个选择器里混用
display: grid和flex-direction—— 它们属于不同布局模型，后者会被忽略 - 如果用 CSS-in-JS 或框架（如 Tailwind），注意类名加载顺序：后定义的
display会覆盖先定义的flex-direction
移动端竖排、桌面横排，但小屏 iPad 也想横排？用 min-width 而非 only screen
写 @media only screen and (max-width: 768px) 看似合理，但 iPad Pro（1024×1366）在横屏时宽度是 1366px，仍会命中桌面规则；而某些安卓平板竖屏也有 800px+ 宽度，导致本该竖排却横排了。关键不在“设备类型”，而在“可用视口宽度”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
@media (min-width: 768px)控制桌面横排，再用@media (max-width: 767px)控制小屏竖排，中间留白给 768–1023px 区间自适应 - 避免
only screen—— 它对打印、语音等媒介做限制，但现代响应式只关心视口，没必要加 - 如果需精准控制 iPad 横屏行为，可叠加
and (orientation: landscape)，但别单独依赖它：用户旋转屏幕时触发延迟明显，体验割裂
flex-direction: column-reverse 导致语义顺序错乱？别只靠视觉翻转
用 flex-direction: column-reverse 把页脚顶到顶部很省事，但屏幕阅读器仍按 DOM 顺序读取，结果先读页脚、再读正文——不符合内容逻辑，也影响 SEO。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 仅在纯视觉调整场景用
column-reverse，比如卡片列表中把最新项置顶，且 DOM 顺序本身无语义要求 - 涉及导航、表单、文章主体等有明确阅读流的区域，用
order属性微调子项顺序，保持 DOM 结构与语义一致 - 测试时打开系统朗读功能（macOS VoiceOver / Windows Narrator），看焦点顺序是否符合预期
Flex 子项 width 百分比 + flex-wrap: wrap 在断点切换时错位？固定子项 flex-basis 更稳
常见现象：小屏下设 width: 100%，大屏切 flex-direction: row 后子项突然换行或挤压，因为百分比宽在 flex 容器里受 flex-basis 影响，而浏览器对 width 和 flex-basis 的优先级处理不统一。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在响应式切换时，统一用
flex: 0 0 [尺寸]替代width，例如flex: 0 0 100%（小屏）→flex: 0 0 50%（大屏） - 避免同时设置
width和flex-basis：前者在非 flex 场景有效，后者才是 flex 布局的基准尺寸，混用易冲突 - 若需等分布局，直接用
flex: 1，但注意子项内容高度差异大时，flex-shrink可能压缩文本，此时加min-width: 0防止过度收缩
断点数值和 flex-direction 的组合看似简单，真正卡住人的往往是 display 层级、DOM 语义、以及浏览器对 flex 属性优先级的隐式处理 —— 这些地方一动，整个流就偏了。
