flex-grow 不能直接实现按屏幕比例分配宽度，因为它只分配剩余空间而非视口百分比，需配合 flex-basis（支持%、vw等）和 flex-shrink 才能精准控制响应式布局。
flex-grow 为什么不能直接实现“按屏幕比例分配宽度”
因为 flex-grow 分配的是剩余空间，不是视口宽度的百分比。它只在父容器有“未被子元素占满的空间”时才起作用；如果所有子元素设了固定宽或 flex-basis 接近容器宽度，flex-grow 就几乎不生效。
常见错误现象：flex-grow: 1 写了一堆，结果三个子项挤成一行还溢出，或者在小屏下完全不收缩——本质是没控制好基础尺寸（flex-basis）和收缩意愿（flex-shrink）。
- 用
flex-grow前，先确认父容器display: flex且有明确宽度（比如width: 100%或max-width） - 子元素默认
flex-basis: auto，会优先按内容宽或显式width占位，此时flex-grow只分“剩下那点缝”，不是整行 - 想让两个子项按 3:7 占满整行？得写
flex: 3和flex: 7，而不是flex-grow: 3+flex-grow: 7（后者缺flex-basis，行为不可控）
媒体查询里改 flex-basis 比改 flex-grow 更可靠
响应式宽度变化，核心是“不同断点下，每个子项该从多宽开始伸缩”。flex-basis 就是那个起点，它支持 %、vw、rem，天然适配比例需求；而 flex-grow 是弹性系数，不带单位，没法直接表达“占 40% 屏幕”这种意思。
使用场景：比如导航栏三等分（大屏），到中屏变两列+下拉，小屏堆叠——这种结构变化靠 flex-grow 单独搞不定，必须配合 flex-basis 和 flex-wrap。
- 大屏（≥1200px）：
flex-basis: 33.333%，flex-grow: 0（禁止拉伸，保持等分） - 中屏（768px–1199px）：
flex-basis: 50%，flex-wrap: wrap，让第三项换行 - 小屏（flex-basis: 100%，
flex-direction: column（可选）
mix-blend-mode 或 transform 不影响 flex 计算，但会干扰视觉判断
有人调完 flex-basis 发现“明明设了 50%，看起来却不到一半”，大概率是加了 transform: scale(0.95) 或 mix-blend-mode: multiply 这类渲染层操作——它们不改变 layout flow，但会让元素视觉尺寸/位置偏移，导致你误判布局是否正确。
性能影响：这类属性触发 GPU 合成，对动画友好，但对 flex 计算毫无意义；调试时建议先关掉，确认布局逻辑跑通再加。
- 检查元素实际 layout 宽度，用浏览器开发者工具的“Layout”面板，别只看渲染结果
-
transform后的元素仍参与 flex 尺寸计算，但它的子元素若用了position: absolute，就彻底脱离 flex flow 了 - 避免在 flex 子项上同时用
width和flex-basis，CSS 会以flex-basis为准，width被忽略（除非flex-basis: auto）
移动端 Safari 对 flex-basis: 0% 的兼容性坑
iOS 15.4 之前，Safari 把 flex-basis: 0% 当成无效值，退回到 auto，导致本该均分的子项按内容宽排列，严重错乱。这不是 bug 是规范模糊点：0% 在无明确父容器高度/宽度上下文时，部分引擎拒绝解析。
解决方案很简单：统一用 flex-basis: 0（无单位）代替 0%，它被所有现代浏览器识别为“从零开始增长”，且不影响百分比意图。
- 错例：
flex: 1 1 0%→ Safari 旧版失效 - 正例：
flex: 1 1 0或flex-basis: 0 - 如果真需要百分比起点（比如
flex-basis: 25%），确保父容器有明确 width（如width: 100vw），否则同样可能回退
flex-basis / flex-grow 关系。想稳，就老实用媒体查询切 flex-basis，少依赖 flex-grow 算比例。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
