display: flex 本身不直接解决像素密度或视口缩放问题，它只是布局工具；真正起作用的是用 flex 布局承接 rem/vw/百分比等适配单位，而非 flex 自身“适配”。
移动端适配中，display: flex 本身不直接解决像素密度或视口缩放问题，它只是布局工具；真正起作用的是「用 flex 布局去承接 rem/vw/百分比等适配单位」，而不是靠 flex 自己“适配”。
为什么 display: flex 在移动端常被误认为“自带适配”
因为 flex 天然适合处理不规则屏幕下的空间分配：比如三等分导航栏、搜索框+按钮组合、卡片流式排列。但它不会自动响应 dpr 或改变字体大小——这些得靠 viewport 设置、根字体计算（如 font-size: calc(100vw / 375)）或第三方库（如 lib-flexible）配合。
- 常见错误现象：
flex: 1在 iPhone SE 和 iPad 上显示宽度一致，但文字小到看不清——这不是 flex 的锅，是没配rem或vw - 真实使用场景：flex 负责“怎么分空间”，而
meta viewport、html { font-size }、媒体查询负责“多大才合适” - 性能影响：flex 本身无渲染开销，但若在 flex 容器里嵌套多层
flex+calc()+vw，可能触发频繁重排，尤其低端 Android 机
flex-direction 和 flex-wrap 在竖屏/横屏切换时的实际表现
移动端横竖屏切换频繁，但 flex-direction 默认不随 orientation 变化——必须手动监听 resize 或 orientationchange 事件来切换。
- 不要依赖
flex-direction: column自动适配竖屏：它只在你显式设置后生效，不会感知设备旋转 -
flex-wrap: wrap在窄屏下能防止溢出，但要注意子项的flex-basis：设成50%可能因边框/内边距超 100%，导致意外换行 - 安卓 WebView 中，
flex-wrap: wrap-reverse兼容性差，建议只用wrap，换行逻辑由业务控制
移动端真机上 justify-content 和 align-items 的对齐偏差问题
某些低端安卓机型（尤其定制 ROM）对 justify-content: center 或 align-items: center 渲染有 1–2px 偏移，不是代码写错，是渲染引擎 bug。
- 典型现象：图标+文字居中后，文字略偏下，或按钮在 flex 容器里看起来“没真居中”
- 临时绕过方案：给子元素加
margin: auto（仅限单个子项），或用transform: translate(-50%, -50%)配合绝对定位 - 更稳妥做法：避免纯依赖
align-items: center垂直居中图文混合内容，改用line-height+vertical-align: middle控制文字基线 - iOS Safari 对
align-content支持不稳定，多行 flex 容器慎用space-between，优先用gap
flex 布局在移动端真正难的不是写法，而是和 viewport、字体缩放、安全区域（如 iPhone X 底部）、输入法弹出导致视口变化这些因素交织在一起时，哪一层该负责什么、哪一层容易失效——这些边界情况，文档很少提，但真机一跑全暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
