问题出在flex-basis上：flex-grow只分配剩余空间而非容器总宽，需设flex-basis: 0（非0px或0%）消除内容宽度干扰，并配合min-width: 0和box-sizing: border-box确保严格比例。

flex-grow 设了但比例不对，问题出在 flex-basis 上

直接写 flex-grow: 3 和 flex-grow: 7 不会让两个子项严格按 3:7 占满整行——因为 flex-grow 只分配「剩余空间」，不是容器总宽的百分比。浏览器先按内容宽度（比如一段文字、一张未设宽的图片）占位，再把剩下的缝隙按权重分，结果完全失真。

必须显式设 flex-basis: 0（注意：是 0，不是 0px 或 0%），抹掉内容对初始尺寸的影响。推荐统一用 flex 简写：

• flex: 3 1 0 → flex-grow: 3, flex-shrink: 1, flex-basis: 0
• flex: 7 1 0 → 同理，权重为 7
• 父容器需有明确宽度（如 width: 100%）且 display: flex

含图片或长英文单词的子项缩不下去

即使写了 flex: 1 1 0，子项里塞了一张未设宽的 <img> 或一串无空格的英文（如 verylongwordwithoutspaces），它仍可能撑开、溢出或拒绝缩小。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

这是因为浏览器默认给内联替换元素（如图片）和某些文本内容设置了隐式最小尺寸，flex-basis: 0 压不住它。

• 必须额外加 min-width: 0，强制允许压缩到 0
• 对图片，建议同时加 max-width: 100% 和 height: auto 防止拉伸变形
• 对长英文/URL，加 overflow-wrap: break-word 或 word-break: break-all

响应式中动态改比例，为什么媒体查询没生效

常见原因是 CSS 层叠顺序失效：原始 flex 声明写在内联 style 属性里（如 style="flex: 1"），媒体查询规则根本覆盖不了它。

• 所有 flex 相关声明必须写在 CSS 文件或 <style></style> 块中，避开内联样式
• 媒体查询里的选择器优先级要更高，例如原始是 .item { flex: 1; }，响应式就得写成 @media (max-width: 768px) { .container .item { flex: 0 0 100%; } }
• 避免混用 width 和 flex：两者冲突时 flex-basis 优先级高于 width，容易覆盖预期

调试时看不到剩余空间怎么分的

Chrome DevTools 的 Layout 面板能直观显示 flex 分配过程，但默认不开启 overlay。

• 打开开发者工具 → 右上角「⋯」→ Settings → Preferences → Elements → 勾选「Enable Flexbox overlay」
• 刷新页面后，在 Elements 面板选中 flex 容器，就能看到基线、剩余空间分配线、各子项实际伸缩范围
• 特别注意：如果 overlay 里没显示「剩余空间」区域，说明当前没有剩余空间（子项总 flex-basis 已等于或超过容器宽），flex-grow 自然不会起作用

真正让比例可控的点不在 flex-grow 数值本身，而在你有没有主动切断内容对初始尺寸的干扰——flex-basis: 0 是开关，min-width: 0 是保险丝，缺一不可。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！