是，默认适配需配合viewport元标签和相对单位；flexbox本身无固定像素，依赖父容器尺寸分配空间，用px会破坏响应式，需用rem/%/vw并设min-width:0防撑开。
flexbox 在移动端是否默认适配视口？
不是自动适配，但 flexbox 本身不带像素固定值时，天然具备响应式基础——它只负责分配可用空间，不管屏幕多宽。关键在于你是否用 px 写死尺寸、是否忽略 viewport 元标签。
- 没加
，iOS Safari 会以 980px 宽度渲染，flex容器再灵活也撑不满物理屏幕 - 用了
width: 375px或font-size: 16px这类绝对单位，flex 项目照样被卡死，flex-grow也拉不开 - 推荐起点：所有尺寸优先用
rem、%、vw，容器设display: flex后，靠flex-basis+flex-shrink控制断点行为
flex-wrap 与移动端换行的常见误判
很多人以为 flex-wrap: wrap 能“智能换行”，其实它只在主轴放不下时才折行，而主轴长度由父容器决定——如果父容器是 width: 100% 且没限制子项最小宽度，小屏下子项可能被强行压缩到看不见。
-
flex-basis: 0+flex-grow: 1是安全组合，避免子项因内容过长撑破容器 - 加
min-width: 0到 flex 项目，防止文本或图片强制撑开（尤其 Chrome Android 对img默认有最小宽度） - 慎用
white-space: nowrap，它会让flex-wrap失效，整行溢出不可见
justify-content 和 align-items 在不同安卓版本的表现差异
Android 4.4（WebView）和部分国产浏览器对 justify-content: space-between 的首尾间距处理异常，可能把第一个/最后一个元素贴边，中间空隙过大；align-items: center 在低版本中对文字垂直居中常失效。
- 替代方案：
justify-content: flex-start+ 手动加margin模拟间距，更可控 - 垂直居中文字：用
display: flex+align-items: center包一层，比直接作用于块级元素兼容性好 - 必须支持 Android 4.x 时，避免
space-evenly—— 它在多数旧 WebView 中完全不识别
.container {
display: flex;
flex-wrap: wrap;
gap: 0.5rem; /* 推荐用 gap 替代 margin，避免 collapse 问题 */
}
.item {
flex: 1 1 calc(50% - 0.5rem); /* 两列布局，预留 gap 空间 */
min-width: 0; /* 关键：允许内容收缩 */
padding: 0.75rem;
}
移动端 flexbox 的真正难点不在属性本身，而在你是否切断了「父容器尺寸 → flex 分配 → 子项内容」这条链路上任何一环的弹性。一个 max-width: 1200px 的外层盒子，或者一段没设 word-break: break-word 的长英文，都可能让整套 flex 布局在小屏上突然崩掉。
立即学习“前端免费学习笔记（深入）”；
