最直接有效的解法是用 @media 切换 flex-direction 为 column；必须修改的情况包括：多按钮文字溢出、卡片图文左右布局文字区过窄、表单控件横向错位、flex-wrap 仍换行混乱——此时主轴方向本身就不该是横向。
Flex 布局在移动端错位，最直接有效的解法是用 @media 切换 flex-direction 为 column，而不是死磕 flex-wrap 或强行缩放子项。
哪些情况必须改 flex-direction？
不是所有错位都靠调间距或换行能解决。以下现象本质是“横向流在窄屏下已不可持续”，硬撑只会让文字被截、按钮重叠、表单控件挤成一团：
- 多个
button或标签并排，在 iPhone 上文字跑出按钮边界 - 卡片中图片左、文字右（
flex-direction: row），结果文字区只剩 80px 宽，根本没法读 - 表单里
label+input+button横着排，iOS Safari 直接错位半行 - 用了
flex-wrap: wrap还是换行错乱——说明主轴方向本身就不该是横的
怎么写媒体查询才不翻车？
别抄网上“@media (max-width: 375px)”这种设备专属断点。真实项目里，768px 是最稳的通用分水岭（覆盖所有手机+小平板），且优先用 max-width，不是 min-width：
@media (max-width: 768px) {
.form-group,
.card-grid,
.nav-actions {
flex-direction: column;
}
}
更进一步可分层控制：
立即学习“前端免费学习笔记（深入）”；
-
max-width: 480px：竖屏手机，加width: 100%防子项继承父容器弹性收缩 -
481px ~ 768px：横屏或小平板，保留row，但必须配flex-wrap: wrap和gap - 禁用
flex: 1在column下——它会让子项高度撑满视口，改用flex: none或显式width: 100%
光改方向还不够，顺手调这仨属性
flex-direction: column 后，原来的对齐逻辑全变了。不调整就会出现顶部大片留白、文字靠左挤成一坨、子项宽度忽大忽小等问题：
-
align-items：横排常用center，纵排建议改stretch（默认）或flex-start，避免左右不对齐 -
justify-content：纵排时flex-start更自然；若用center，容易把内容悬在屏幕中间，手指够不着 -
width或flex-basis：子项在纵排下务必设width: 100%，否则可能因flex-shrink被压缩到无法点击
真机测试不是可选项
Android WebView 和 iOS Safari 对 flex-basis、min-width 的解析仍有差异，模拟器看不出问题：
- 用 Safari 开发者工具连真机，看 computed 样式里
flex-basis是否被强制转成auto - 检查
<meta name="viewport">有没有user-scalable=no——它会干扰缩放逻辑，让 flex 计算失准 - 第三方 UI 库（如 Vant、Ant Design Mobile）已内置响应式 flex 规则，别重复覆盖它们的
.van-button--normal类
错位的本质不是 CSS 写错了，而是你还在用桌面端的信息密度和交互节奏去要求手机屏幕。切方向只是开关，背后是对移动端“单列优先、触控友好、阅读流畅”的重新校准。
