flex: 1 在移动端需配合 min-width: 0、word-break: break-word 和 flex-wrap: wrap 才能稳定等分剩余空间，否则因内容撑宽、默认最小宽度限制及浏览器解析差异导致布局失效。
flex: 1 在移动端不能直接写就完事，必须配合 min-width: 0、word-break: break-word 和 flex-wrap: wrap 才能稳定等分剩余空间。
为什么 flex: 1 在 iPhone 或安卓小屏上经常“失效”
不是 Flex 不行，是浏览器在窄视口下卡在了收缩逻辑里。默认 flex-basis: auto 让子项先按内容宽度占位——长 URL、连续中文、未设 img 尺寸的图片，都会撑开起点宽度；而子项又自带 min-width: auto，宁可横向溢出也不缩到零。结果就是：文字不换行、出现意外滚动条、整行错位甚至被挤掉。
更隐蔽的是 Safari iOS 15.4 之前版本对 flex-basis: 0% 的解析异常（注意：不是 0px 或 0%，必须是无单位的 0），会导致 flex 项初始宽度计算错误。
-
flex: 1等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0，但若子项内有、min-width: auto，得额外加min-width: 0 - 父容器没设明确宽度（比如漏了
width: 100%或max-width），Flex 引擎算不出“剩余空间”，flex-grow就分不到任何东西 - 写了
gap却又给子项加margin，总宽超限，触发flex-shrink而非flex-grow
必须同时加上的三个防御性 CSS 规则
缺一不可，否则任意一个都可能让布局在某台手机上崩掉：
- 每个分栏项加
min-width: 0：解除最小宽度限制，允许真正收缩到零 - 分栏内容容器（如
.item-content）加word-break: break-word或overflow-wrap: break-word：强制打断长文本，避免撑破 - 父容器设
display: flex+flex-wrap: wrap：即使只有一行也要写，某些 Android WebView 对单行 flex 渲染异常
示例结构：
.grid-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.grid-item {
flex: 1;
min-width: 0;
}
.grid-item > * {
word-break: break-word;
}
按比例分配（比如 1:2:3）和固定栏混合时怎么写
核心仍是统一起点：所有弹性项用 flex-basis: 0，再靠 flex-grow 比值分配。固定栏（如侧边栏）必须用 flex: 0 0 240px 锁死，不能只写 width: 240px。
- 三列按 1:2:3 分配：
.item1 { flex: 1 1 0; }、.item2 { flex: 2 1 0; }、.item3 { flex: 3 1 0; } - 左侧固定 240px，中间自适应：
.sidebar { flex: 0 0 240px; }、.main { flex: 1; } - 右侧需独立滚动时，
.main还要加box-sizing: border-box、min-height: 0、overflow-y: auto，且父容器必须有高度约束（如min-height: 100vh）
移动端小屏下的列数自适应别硬切断点
纯靠 @media (max-width: 768px) 切成单列，会在 iPad Mini 或折叠屏上出问题——它们视口宽度接近临界值，但设备像素比和渲染行为不同。
更稳妥的做法：
- 用
minmax(280px, 1fr)+auto-fit的 Grid 替代 Flex 做列数自适应（语义更清晰，兼容性也够） - 坚持用 Flex 的话，可用 JS 监听
window.innerWidth动态切换 class，或拆成细粒度断点：@media (max-width: 480px)（iPhone SE）、@media (max-width: 600px)（主流安卓小屏） - 如果只有 2–3 个子项，可针对性写：
2 个子项时 flex: 1 1 50%、3 个时 flex: 1 1 33.333%，但必须配flex-wrap: wrap和足够gap防重叠
最常被忽略的其实是 min-width: 0 ——它不起眼，但只要漏掉，哪怕其他所有规则都对，小屏下依然大概率横向溢出。你可能会花半小时检查 HTML 结构或 JS，却没意识到问题藏在这一行 CSS 里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
