flex-grow在Bootstrap 4中按权重瓜分剩余空间，非直接占百分比；.col类默认flex: 0 0 auto覆盖flex-grow-1致失效，需弃用.col改用纯Flex工具类组合。
flex-grow 在 Bootstrap 4 中不是“让元素占父容器百分之几”，而是按权重瓜分**减去所有子项基础尺寸后的剩余空间**。直接套用 .col 类 + flex-grow-1 会失效，因为 .col 内置的 flex: 0 0 auto 会覆盖你设的 flex-grow。
为什么 .col 类和 flex-grow-1 一起用就失效
Bootstrap 4 的 .col 类默认声明了 flex: 0 0 auto，这等价于 flex-grow: 0 + flex-shrink: 0 + flex-basis: auto。浏览器计算时，flex-grow: 0 优先级更高，你后加的 .flex-grow-1 就被划掉——开发者工具里能看到它变成灰色 strikethrough 状态。
必须彻底放弃 .col，改用纯 Flex 工具类组合：
-
.d-flex或.d-inline-flex开启弹性上下文 -
.flex-row（默认可省略）控制主轴为水平 - 左右栏加
.flex-shrink-0并配合width固定尺寸 - 中间栏只加
.flex-grow-1，不设width
flex-grow 数值到底控制什么
flex-grow 的数字是**分配权重比**，不是最终宽度比。例如三个子项分别设 flex-grow: 3、flex-grow: 2、flex-grow: 1，它们会按 3:2:1 分配剩余空间，而不是最终宽高比为 3:2:1。
立即学习“前端免费学习笔记（深入）”；
剩余空间 = 父容器总宽 − 所有子项的 flex-basis（或 width）之和。如果没设 flex-basis，默认是 auto（即内容撑开的宽度），这时若某项文字很长，它的基础尺寸就大，剩余空间可能为负，flex-grow 完全不触发。
安全写法是显式重置基准：
- 用
flex: 3 0 0替代flex-grow: 3（等价于flex-grow: 3; flex-shrink: 0; flex-basis: 0） - 对含图片/iframe 的子项加
min-width: 0，防止固有尺寸锁死伸缩 - 确保父容器有明确宽度约束（比如
.container-fluid或width: 100%）
移动端和 IE11 的典型坑
在手机上 flex-grow 经常“不动”，根本原因不是属性失效，而是计算前提崩了：内容撑开的 flex-basis 太大，导致剩余空间 ≤ 0；或者父容器没设 width，在 position: fixed 或 body 直接子元素中无法撑满视口。
IE11 更麻烦：flex-grow: 1 单独写无效，必须配 flex-basis：
- 写成
flex: 1 1 auto（IE11 可用）或flex: 1 0 0（更可控） - 避免混用
width和flex-grow，尤其别给子项设width: 0—— IE11 会直接跳过计算 - 检查盒模型：
box-sizing: border-box必须统一，否则边框和 padding 会让flex-grow算错剩余像素
响应式中动态调整 flex-grow 的注意事项
媒体查询里改 flex-grow 值本身没问题，但必须同步处理收缩行为和基准尺寸。比如桌面端侧边栏设 .sidebar { flex: 2 0 0; }，小屏想收起它，不能只改 flex-grow，得：
- 设
flex: 0 0 auto（关闭伸缩） - 加
width: 0+overflow: hidden隐藏内容 - 必要时用
d-none d-md-flex控制显示/隐藏
真正难调的不是数值，而是当父容器有 padding、子项含 border 或未重置 input 默认样式时，flex-grow 计算出的宽度总会差几个像素——这时候必须靠 box-sizing: border-box 和显式 flex-basis 拉回一致。
