flex-direction在媒体查询中直接切换会失效，主因是父容器未设display:flex或被更高特异性规则覆盖；必须确保所有断点下父容器显式声明display:flex，并在对应媒体查询中显式设置flex-direction值。
flex-direction 在媒体查询中直接切换会失效？
直接在 @media 里写 flex-direction: column; 通常能生效，但常见失效场景是父容器没设 display: flex;，或被更具体的 CSS 规则覆盖。检查 computed styles 时发现值没变，大概率是选择器权重不够，或者父元素根本不是 flex 容器。
实操建议：
- 确保父容器始终有
display: flex;（不能只在某断点下加） - 用浏览器 devtools 的 “Computed” 面板确认最终生效的
flex-direction值 - 避免用 ID 或内联样式覆盖媒体查询，优先用 class + 合理层级
移动端竖排、桌面端横排的典型写法
这是最常用场景：小屏堆叠内容，大屏并排展示。关键不是“切换顺序”，而是控制主轴方向 —— flex-direction: column; 让子项从上到下排列，flex-direction: row; 让它们从左到右排列。
示例代码：
.container {
display: flex;
flex-direction: column; /* 默认竖排 */
}
<p>@media (min-width: 768px) {
.container {
flex-direction: row; /<em> ≥768px 横排 </em>/
}
}</p>
注意：flex-direction 不改变 DOM 顺序，只改变渲染流向。如果需要视觉顺序和 DOM 顺序不一致（比如把标题放到内容下面），得配合 order 属性。
用 flex-direction: column-reverse 实现“倒序列表”时的断点陷阱
想在手机上把操作按钮放在顶部、内容在下，桌面端反过来？用 column-reverse 很方便，但容易忽略两点：一是 justify-content 行为会随之变化；二是某些旧版 Safari 对 column-reverse 支持不稳定（iOS ≤12.5 需加 -webkit- 前缀）。
实操建议：
- 搭配
justify-content: flex-start;确保 reverse 后内容不意外溢出容器顶部 - 如需兼容 iOS 12 及更早版本，写成
-webkit-flex-direction: column-reverse;和flex-direction: column-reverse; - 避免对
column-reverse容器内的子项再用margin-top调整位置 —— 主轴已翻转，margin-top变成沿交叉轴，行为难预测
flex-direction 切换后子项尺寸不响应？
切换 flex-direction 后，子项宽度/高度没自动适配，常因为没设 flex 相关属性。比如横排时设了 width: 200px;，切到竖排后这个 width 还在，但此时它变成“交叉轴尺寸”，不再控制主轴占位。
解决思路：
- 优先用
flex: 1;或flex: 0 0 auto;替代固定宽高 - 竖排时让子项填满宽度：
width: 100%;；横排时让子项填满高度：height: 100%;（但需确保父容器有明确高度） - 用
min-width/min-height代替width/height，更适应方向切换
真正麻烦的是嵌套 flex 容器 —— 外层 flex-direction 切换后，内层的主轴/交叉轴关系全变了，这时候光调外层不够，得逐层检查 flex 行为是否符合预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
