最常见原因是父容器未设display: flex，导致flex-direction在非flex上下文中完全无效；必须在所有断点中显式声明display: flex，并用devtools确认computed值。
flex-direction 媒体查询切换为什么没生效？
最常见原因是只写了 @media (orientation: landscape)，但这个查询在桌面浏览器不可靠，iPad Safari 也经常不触发。真正起作用的是宽度断点组合。
- 必须确保
<meta name="viewport" content="width=device-width">存在且未被 JS 覆盖 - 优先用
@media (min-width: 768px) and (max-height: 400px)或@media (min-width: 1024px)替代纯 orientation 查询 - 检查是否有更高优先级样式（比如内联
style="flex-direction: row;"或带!important的规则）锁死了方向 - 确认父容器已设
display: flex——flex-direction在非 flex 容器上完全无效
横屏时 flex-direction 切成 row 后子项变形怎么办？
方向变了，但子项的尺寸逻辑没同步更新，就会拉伸、溢出或堆叠错乱。关键不是只改主轴，而是重估每个子项在新流向下的“占位方式”。
- 竖屏
flex-direction: column下，子项常靠width: 100%填满；横屏切row后，得改用flex: 0 0 50%或flex: 1控制横向分配 - 表单控件（如
<input>）默认width: auto，横屏会撑满整行，需显式加max-width: 300px或flex: 0 1 280px - 若子项含图片或图标，注意
height在column是主轴尺寸，在row变成交叉轴，此时要调align-items或子项自身height
justify-content 和 align-items 在方向切换后怎么配？
这两个属性永远绑定主轴/交叉轴，不会“自动理解你想要居中”。justify-content: center 在 row 是水平居中，在 column 就变成垂直居中——语义一致，但表现轴不同。
- 保持对齐意图：如果目标是“让按钮始终在可用空间中央”，
justify-content: center+align-items: center在两种方向下都适用 - 如果是“导航栏内容左对齐、右对齐”，则
justify-content: flex-start（row）和justify-content: flex-start（column）效果完全不同，后者是顶部对齐，此时应改用align-items: flex-start -
flex-wrap: wrap在row下控制横向换行，在column下控制纵向换行；若横屏需多列，别忘了加它，否则子项会被压缩或溢出
iPad 横竖屏切换时 100vh / 100vw 失效怎么处理？
iPad Safari 中，100vh 在横屏仍按竖屏高度计算，100vw 可能包含隐藏地址栏高度，导致布局截断或横向滚动。这不是 flex-direction 的问题，但会直接破坏方向切换后的视觉完整性。
- 优先使用
100dvh和100dvw（Safari 16.4+、Chrome 105+ 支持），它们基于“动态视口”实时计算 - 降级方案：用
min-height: 100%配合html, body { height: 100% }，并给容器加overflow: hidden防止意外滚动 - 字体、间距等响应式单位别只用
vw，搭配clamp()更稳，例如font-size: clamp(14px, 2.5vw, 16px)
flex-basis 或显式宽高是否还合理——它不像 justify-content 那样有直观反馈，但一旦错配，整个布局就松散或挤压。真机测试前，务必旋转设备看一眼元素盒模型的实际尺寸。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
