移动端Flex布局异常时应优先用媒体查询切换flex-direction为column。常见场景包括按钮重叠、卡片文字过窄、表单错位等；推荐断点max-width: 768px，并配合align-items、justify-content、width等属性优化，真机测试必不可少。
移动端 Flex 布局显示异常，通常是因为默认的 flex-direction: row 在小屏下内容挤占、换行失控或子项溢出。最直接有效的办法是用媒体查询（@media）在特定断点切换 flex-direction，比如从横向排布改为纵向堆叠。
识别何时该改 flex-direction
以下情况建议优先考虑调整方向：
- 多个按钮/标签横向排列，在手机上重叠或文字被截断
- 卡片式布局中图片和文字并排（
row），导致文字区域过窄无法阅读 - 表单控件（如 label + input + button）横排后在 iOS Safari 中错位或不换行
- 使用
flex-wrap: wrap仍无法合理折行，子项宽度计算异常
常用断点与方向切换写法
不必死守固定像素值，推荐以内容实际表现为准。常见可靠写法：
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
更精细的控制可叠加：
立即学习“前端免费学习笔记（深入）”；
- 竖屏手机（
max-width: 480px）：强制column，子项设width: 100% - 横屏或小平板（
481px ~ 768px）：保留row，但加flex-wrap: wrap和gap - 避免只靠
min-width，移动端 viewport 缩放和 UA 样式会影响渲染，优先用max-width
配合其他 flex 属性效果更好
单改 flex-direction 不够时，顺带调整这些属性能显著提升一致性：
-
align-items：横排时常用center，纵排后建议改为stretch或flex-start -
justify-content：纵排时flex-start更自然，避免顶部留白过大 -
flex-basis或width：子项在纵排下建议显式设width: 100%，防止继承父容器的弹性收缩行为 - 慎用
flex: 1：在column下可能导致高度撑满视口，可用flex: none或具体数值替代
真机测试不可跳过
CSS Flex 在 Android WebView 和 iOS Safari 中对 flex-basis、min-width 的解析仍有差异。务必在真实设备上验证：
- 用 Safari 开发者工具远程调试 iOS 页面
- 检查是否因 viewport meta 设置不当（如
user-scalable=no）导致缩放干扰布局 - 留意第三方 UI 库（如 Ant Design Mobile、Vant）已内置响应式 flex 规则，避免重复覆盖
