当 Flex 容器内第一个子元素因空间不足而换行时，第二个设为 flex: 1 的单行子元素会出现异常空白；通过将换行子项的 flex-basis 设为 min-content 可显著压缩其占用宽度，缓解该间隙问题。
当 flex 容器内第一个子元素因空间不足而换行时，第二个设为 `flex: 1` 的单行子元素会出现异常空白；通过将换行子项的 `flex-basis` 设为 `min-content` 可显著压缩其占用宽度，缓解该间隙问题。
在使用 Flex 布局实现“弹性填充 + 固定单行”布局时（例如标签栏、表单项+操作按钮组合），常遇到如下典型问题：
- 第一个子元素允许换行（如长文本说明），第二个子元素强制单行（如操作按钮或状态标签）；
- 当容器宽度充足时，布局正常；
- 但当容器变窄、首项换行后，次项虽已 flex: 1，却无法紧贴首项底部对齐，反而在二者之间产生明显垂直/水平方向的“空隙”——这并非 gap 或 margin 所致，而是 Flex 主轴对齐与换行内联元素基线行为共同作用的结果。
根本原因在于：默认情况下，flex: 1 等价于 flex: 1 1 0，其 flex-basis 为 0，此时浏览器按“收缩至内容最小尺寸后均分剩余空间”的逻辑分配主轴空间。但当首项是纯文本 <span> 且换行时，其实际占据的主轴尺寸仍基于整行内容的自然宽度（即最长行宽），而非视觉高度；而 align-items: center 又会将其沿交叉轴（此处为垂直方向）居中对齐，从而在短内容项（第二项）上方/下方留出大量空白。
✅ 正确解法是显式控制首项的 flex-basis：
.container > span:nth-child(1) {
flex: 1 1 min-content; /* 关键：以内容最小固有宽度为基准 */
}
.container > span:nth-child(2) {
white-space: nowrap;
flex: 1 1 auto; /* 保持自适应伸缩 */
}min-content 表示该元素在不换行前提下能容纳全部内容所需的最小宽度（对纯文本 <span> 即为最长单词或连续无空格字符串的宽度）。当首项换行时，min-content 会取其单行不换行时的最小可能宽度（通常远小于容器宽），从而大幅压缩其主轴初始尺寸，使第二项得以更紧密地参与剩余空间分配。
⚠️ 注意事项：
- min-content 是 CSS Sizing Level 3 特性，在现代浏览器（Chrome 84+/Firefox 69+/Safari 14.1+）中稳定支持，旧版 Safari 需加 -webkit-min-content 前缀；
- 该方案无法完全消除所有间隙——因为换行文本本身存在行高（line-height）、字体下沉（descender）及基线对齐（baseline alignment）等渲染特性，align-items: center 仍会基于整行盒模型居中，物理间隙不可避免；若需像素级紧贴，建议改用 align-items: flex-start 并手动微调 margin-top 或采用 Grid 布局替代；
- 避免对换行项设置 width 或 max-width，否则会干扰 flex-basis 计算逻辑。
总结：面对 Flex 中因换行引发的空间分配失衡，优先调整 flex-basis 而非依赖 flex-grow；min-content 是语义清晰、兼容良好的首选值，它让布局真正“按内容所需而非容器所给”来响应式伸缩。
