Flex方向切换是移动端布局适配的高效方案：通过flex-direction在column与row间切换，配合媒体查询和对齐属性联动，实现横竖屏自动重组，无需JS或重复样式。
移动端布局适配难，关键不在写得多，而在结构是否足够弹性。Flex 方向切换（flex-direction）是一个被低估但极其实用的技巧——它不依赖媒体查询写两套样式，也不靠 JS 动态计算，仅靠 CSS 自身的流式逻辑，就能让同一组元素在横竖屏下自动重组布局。
用 column → row 切换实现“竖屏单列、横屏双列”
很多内容卡片、表单项、图标组，在手机竖屏时适合上下排列，横屏或平板上却浪费横向空间。这时把容器设为 flex-direction: column，再配合 @media (min-width: 768px) 切成 row，元素就会自然从“一列到底”变成“左右并排”。
- 注意给子项设置
flex: 1或固定宽度（如flex: 0 0 50%），避免横屏时撑满一行导致变形 - 若需三栏，可用
flex: 0 0 calc(100% / 3)，配合flex-wrap: wrap更稳妥 - 慎用
width: 50%替代 flex 分配——它不响应 flex 的伸缩规则，容易和 margin/padding 冲突
reverse 方向反转解决按钮顺序适配
某些操作区（如底部工具栏、表单提交区），竖屏时希望“取消→确认”从左到右，横屏时因空间变宽，可能需要“确认→取消”更符合操作动线。此时不用重写 HTML 顺序，只需：
- 默认设
flex-direction: row - 横屏时加
flex-direction: row-reverse - 配合
order属性微调个别项（比如让“确认”永远在最右，不管方向如何）
嵌套 flex + 方向组合应对复杂模块
一个新闻列表页常含标题、摘要、图片、标签。竖屏时图片在标题下方，横屏时希望图片右置、文字左对齐。可这样组织：
- 外层容器
display: flex; flex-direction: column;（竖屏主结构） - 每条新闻内嵌一层
display: flex，默认flex-direction: column - 横屏时只改内层为
flex-direction: row;，并给图片设margin-left: auto或align-self: flex-end - 这样外层仍保持整体垂直流，内层局部水平化，互不干扰
别忘了 align-items 和 justify-content 的联动
方向变了，对齐方式也要同步调整。例如竖屏时 justify-content: center 让按钮居中，横屏切为 row 后，若按钮变左右分布，就该换成 justify-content: space-between 或 flex-end。
-
align-items控制交叉轴对齐：column 时是水平对齐，row 时是垂直对齐 - 建议把对齐相关声明和
flex-direction放在同一媒体查询块里，避免遗漏 - 用
align-self单独控制某一项，比改全局更灵活
不复杂但容易忽略。方向切换不是万能解法，但它能覆盖大量“结构不变、排列微调”的适配场景，减少冗余代码和维护成本。
