移动端响应式必须默认设 flex-direction: column，再通过媒体查询切换为 row；column 天然适配小屏垂直流，避免横向溢出，且 justify-content、flex-wrap 等需随主轴同步调整。
移动端响应式用 Flexbox，核心就一条：flex-direction 必须默认设 column，所有方向切换都交给媒体查询——反着来会直接导致小屏内容横向溢出，且 overflow-x: hidden 压根救不了。
为什么移动端必须默认 flex-direction: column
小屏宽度窄，水平排布几个元素极易超出视口。如果根容器一开始设了 row，哪怕子项用了 flex-wrap: wrap，只要总宽度略超（比如字体缩放、系统UI栏占位），就会触发横向滚动条或内容截断。而 column 天然适配垂直流，内容自然向下延伸，用户靠滚动就能看到全部。
- 错误写法：
.container { display: flex; flex-direction: row; }→ 小屏立刻溢出 - 正确写法：
.container { display: flex; flex-direction: column; }→ 再在@media (min-width: 768px)里切回row - 注意：
flex-direction切换后，justify-content的语义也变了（主轴从水平变垂直），所以它也得同步进媒体查询
flex-wrap 别提前写死，只在断点里加
很多开发者图省事，在根容器上直接写 flex-wrap: wrap，以为“反正小屏也能换行”。但问题在于：小屏 column 下 wrap 完全无效（列方向不换行），反而干扰桌面端逻辑；更糟的是，某些旧版 Safari 对 flex-wrap 在 column 下的行为有兼容问题。
- 安全做法：根容器只写
display: flex和对齐属性，flex-wrap留给媒体查询 - 桌面端需要折行时再加：
@media (min-width: 768px) { .container { flex-wrap: wrap; } } - 电商列表等场景，子项用
flex: 0 1 calc(50% - 10px)比单纯flex-wrap更可控
子项尺寸别靠 flex-grow: 1 硬撑
移动端内容长度差异大（比如标题短、描述长），如果子项统一设 flex: 1，会导致短内容被强行拉高，空白难看；设 flex: 0 1 auto 才是安全默认——不放大、可缩小、按内容宽。
- 导航菜单项：
flex: 0 0 auto+margin-bottom: 8px（避免高度错位） - 卡片类布局：
flex: 0 1 100%（小屏独占一行），桌面端再改flex: 0 1 calc(33.333% - 20px) - 绝对要避开：
flex: 1或flex-grow: 1放在根容器上，它会让所有子项均分剩余高度，移动端页面直接变长页
对齐方式随主轴动态切换
justify-content 和 align-items 的作用轴取决于 flex-direction。小屏 column 时，justify-content: center 是垂直居中，align-items: center 是水平居中；桌面 row 时二者作用轴互换。所以不能全局写死一个值。
- 典型导航栏：
@media (max-width: 767px) { .nav { justify-content: center; } }（堆叠居中） - 同一样式块里：
@media (min-width: 768px) { .nav { flex-direction: row; justify-content: space-between; } } - 别偷懒写成：
.nav { justify-content: center; } @media (...) { justify-content: space-between; }—— 小屏会继承space-between，中间空一大片
真正麻烦的不是写几行媒体查询，而是理解每个 Flex 属性绑定的是哪条轴、在哪种流向下生效。一旦把 flex-direction 当作“开关”而不是“初始值”，后续所有对齐和尺寸逻辑才不会崩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
