flex-grow 控制剩余空间分配权重，不负责对齐；适用于图文并排动态分宽场景，如导航栏图标+文字，需配合 align-items 或 align-self 实现垂直居中。
flex-grow 不能直接控制图片与文字的对齐比例
flex-grow 控制的是「剩余空间分配权重」，不是对齐方式。它决定子元素在主轴方向上如何拉伸占位，和垂直/水平对齐无关。常见误解是以为设 flex-grow: 1 就能让文字“贴着图片右对齐”或“按比例居中”，其实它只影响宽度（或高度，取决于 flex-direction），不影响基线、中线或视觉重心位置。
什么时候该用 flex-grow？哪些场景它真有用
真正适合 flex-grow 的场景是图文并排且需要动态分配水平空间，比如导航栏图标+文字、卡片标题+操作按钮、表单项标签+输入框。
- 图片固定尺寸（如
width: 24px），文字区域设flex-grow: 1，自动撑满剩余宽度 - 多个文字块之间需等比分配空间（如三列价格标签），可设相同
flex-grow: 1 - 配合
flex-shrink: 0防止图片被压缩（尤其响应式下） - 注意：如果父容器没设
flex-wrap: wrap，flex-grow在窄屏下可能把文字挤成一行超长，触发溢出而非换行
对齐问题误用 flex-grow 的典型表现
你写了 flex-grow: 1 却发现图片和文字还是上下错位、底部悬空、多行文字顶部对齐但末行飘高——这不是 flex-grow 没生效，而是你拿错了工具。这类问题根源在交叉轴（垂直方向）对齐逻辑，跟主轴空间分配无关。
-
align-items: center是解决垂直居中的第一选择，不是flex-grow - 多行文字与图片顶部对齐但底部不齐？那是
align-items: flex-start的正常行为，需改用align-self: center单独调文字项，或包一层div再整体居中 - 想让文字“视觉上”和图片中线对齐？优先调
line-height匹配图片高度，而不是靠flex-grow拉宽来“凑”
flex-grow 配合对齐的最小可行组合
只有当你要同时解决「空间分配 + 对齐」时，才把 flex-grow 和对齐属性一起用。关键点在于分清主轴（justify-content / flex-grow）和交叉轴（align-items）职责。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
display: flex且明确flex-direction（默认row） - 图片设
flex-shrink: 0+ 固定宽高（或aspect-ratio），避免被压缩变形 - 文字容器设
flex-grow: 1（仅当需占满剩余宽度），再单独加align-self: center确保垂直居中 - 避免给文字本身设
flex-grow：它不是 flex 项目，只是普通文本节点；要作用于包裹它的<span>或<div>
最常被忽略的一点：flex-grow 生效的前提是容器有「剩余空间」。如果所有子项宽度之和已经等于容器宽度，flex-grow 值再大也没用——这时候该检查 flex-basis、width 或是否意外设置了 white-space: nowrap。
