flex-direction 切换前必须确保父容器已设 display: flex；否则媒体查询中的 flex-direction 无效。推荐默认设 column，断点改 row，并同步调整 justify-content 和 align-items，避免语义与可访问性问题。
flex-direction 切换前必须确保父容器是 flex 容器
很多人写完 @media (max-width: 768px) { .container { flex-direction: column; } } 却没效果，根本原因是父容器压根没设 display: flex;。媒体查询只改方向，不激活 flex 布局。浏览器看到的还是普通块级流，flex-direction 完全被忽略。
实操建议：
- 父容器样式里必须显式写
display: flex;（不能只在某断点下加） - 用浏览器 DevTools 的 “Computed” 面板确认
display确实是flex，且flex-direction值已生效 - 避免用 ID 选择器或内联样式覆盖媒体查询规则——它们权重太高，容易让
flex-direction被静默丢弃
column ↔ row 切换是最安全的响应式组合
移动端竖排、桌面端横排，用 flex-direction: column; 和 flex-direction: row; 就够了。-reverse 类值虽然能翻转顺序，但会干扰键盘 Tab 顺序、屏幕阅读器朗读逻辑，还可能在旧版 Safari（iOS ≤12.5）中失效或需要 -webkit- 前缀。
典型写法：
.container {
display: flex;
flex-direction: column; /* 默认竖排 */
}
<p>@media (min-width: 768px) {
.container {
flex-direction: row; /<em> ≥768px 横排 </em>/
}
}</p>
- 这个组合不改变 DOM 顺序，语义和可访问性都稳定
- 子项默认会按容器宽度/高度自动分配空间，无需额外设
width或height - 若需控制横排时每项占宽（比如两栏），优先用
flex: 0 0 50%，别用width: 50%—— 后者不响应 flex 的伸缩规则
方向变了，justify-content 和 align-items 得同步调
flex-direction 一变，主轴和交叉轴就互换了：justify-content 控制主轴对齐，align-items 控制交叉轴对齐。竖排时居中按钮用 justify-content: center;，横排后就得换成 justify-content: space-between; 或 flex-end;，否则按钮会堆在顶部。
实操建议：
- 把
justify-content、align-items和flex-direction放在同一媒体查询块里声明，避免遗漏 - 单个子项需要特殊对齐（比如让图片靠右），用
align-self: flex-end;比全局改align-items更精准 - 竖排时
align-items: center;是水平居中，横排时它变成垂直居中——这点容易反直觉，调试时多看“Computed”面板里的轴向说明
嵌套 flex + 局部 direction 切换更适应复杂模块
整页切 column 太粗暴？比如新闻卡片，竖屏时图片在标题下方，横屏想图片右置、文字左对齐。这时外层保持 flex-direction: column;（维持整体垂直流），只给每张卡片内部容器加 flex-direction: row;，就能局部水平化，互不干扰。
关键点：
- 避免在同一个容器上反复切换
flex-direction，容易引发渲染抖动或对齐错乱 - 嵌套层级不宜过深，三层 flex 嵌套在低端 Android 上可能出现回流性能问题
- 如果内层要换行（比如横屏下多个图标并排溢出），记得加
flex-wrap: wrap;，仅靠flex-direction不管换行
真正麻烦的从来不是 flex-direction 本身，而是方向切换后对齐、间距、语义、可访问性的连带调整——这些细节不补上，再准的 direction 也撑不起一个可用的移动端布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
