移动端flex布局错乱主因是flex-shrink:1默认压缩、100vh被锁死、父子margin合并、滚动条吃宽度；应优先检查这四点而非盲目调整justify-content。
移动端 Flex 布局错乱，八成不是代码写错了，而是几个规范行为叠加后“看起来歪了”——比如 flex-shrink: 1 默认压缩、100vh 被锁死、父子 margin 合并、滚动条吃掉宽度。先盯住这四点，比盲目调 justify-content 有效得多。
flex-direction 设成 column 还是 row？看设备宽度，别只看像素
小屏下用 flex-direction: row 是多数错位的起点。手机竖屏时主轴空间极窄，row 强行横排，触发 flex-shrink 压缩或文字换行错位。
- 默认就设
flex-direction: column，大屏再用媒体查询覆盖：例如@media (min-width: 768px)切回row - 别只依赖
max-width: 768px——iPad 横屏是1024×768，但高度仅 768px，此时仍需竖排，建议改用@media (max-height: 480px) and (min-width: 640px) - 表单类区块（
label+input）必须column，否则input溢出或换行断裂
flex-shrink: 0 不是万能解药，但不加它大概率会压扁按钮和图标
flex-shrink 默认为 1，意味着所有子项在空间不足时按比例让出宽度。移动端一缩放，带 padding 的按钮、固定宽的图标、长文本的 span 就会被“挤瘦”，造成视觉错位。
- 明确需要固定尺寸的元素（如搜索按钮、头像、徽标），直接加
flex-shrink: 0 - 避免全局重置：
* { flex-shrink: 0 }会破坏弹性逻辑，导致内容撑不出容器 - 搭配
min-width: 44px使用，既防压缩又满足触控最小点击区域 - 注意优先级：若同时设了
width和flex-basis，浏览器以flex-basis为准；flex-basis: auto时才 fallback 到width
justify-content / align-items 居中失效？先查父容器有没有高度
写了 display: flex; justify-content: center; align-items: center 却没效果，大概率是父容器渲染高度为 0——Flex 的交叉轴对齐（尤其是 align-items: center）必须依赖可计算的高度。
- 给父容器加
min-height: 100dvh（推荐），iOS Safari 地址栏收放时不会跳变；不支持dvh的老版本，用 JS 注入：document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)，再在 CSS 中写min-height: calc(var(--vh, 1vh) * 100) - 务必重置
body { margin: 0; }，浏览器默认外边距会让容器实际可用高度缩水 - 子元素若用了
position: absolute或float，它就不再是 flex item，align-items对它完全无效
gap 比 margin 更可靠，尤其在 flex-wrap 换行时
用 margin-bottom 控制表单项间距，最后一项会多出空白；用 margin-right 做导航栏，最后一项右边距多余；更麻烦的是，flex-wrap 换行后，行与行之间无法用 margin 统一控制。
- 直接上
gap: 12px，横向纵向间距自动生效，且不触发 margin 合并 -
gap只作用于 flex item 之间，首尾元素无额外边距，无需:last-child清除 - 真机测试时注意：某些 Android WebView 对
gap支持不全，可降级为padding包裹 +margin内部微调
最常被忽略的是：第三方 UI 库（如 Vant、NutUI）内部用了 position: absolute 或 transform，会让组件脱离 flex 流——此时再怎么调父容器的 display: flex 都没用，得单独重写该组件的定位逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
