本文详解通过 flex-basis: 0 配合 flex-grow: 1 实现「按内容（如宽高比）自动计算基础尺寸，同时抑制文本溢出导致的意外容器扩张」的现代 css 布局策略。
本文详解通过 flex-basis: 0 配合 flex-grow: 1 实现「按内容（如宽高比）自动计算基础尺寸，同时抑制文本溢出导致的意外容器扩张」的现代 css 布局策略。
在使用 Flexbox 排列带标题的响应式图片时，一个常见却棘手的问题是：当 <figcaption> 文本过长且不换行时，它会强行撑开父级 <figure>，破坏原本由 aspect-ratio 和固定高度（如 height: 200px）精确控制的布局节奏——即使你已为图片设定了理想的宽高比，整个卡片宽度仍被文字“劫持”。
根本原因在于：默认情况下，<figure> 的 flex-basis 是 auto，即基于其内容（包括未折行的长文本）计算初始主轴尺寸。Flex 容器会优先尊重该基准值，再分配剩余空间；而长文本作为不可压缩的内联内容，直接抬高了 flex-basis 下限，导致 aspect-ratio 失效。
✅ 正确解法是重置弹性基准：将 <figure> 的 flex-basis 显式设为 0，并确保 flex-grow: 1（或简写为 flex: 1），从而让浏览器完全忽略内容尺寸，转而严格依据子元素（即 <img>）的内在约束（height + aspect-ratio）来分配空间：
.flex {
display: flex;
gap: 1rem;
}
figure {
flex: 1 0 0; /* 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0 */
margin: 0;
padding: 0;
}
img {
object-fit: cover;
height: 200px;
width: auto; /* 由 aspect-ratio 和 height 共同决定实际宽度 */
}
.pic-square img { aspect-ratio: 1 / 1; }
.pic-wide img { aspect-ratio: 16 / 9; }
/* 关键补充：确保 figcaption 可安全换行 */
figcaption {
white-space: normal; /* 允许换行（默认值，但显式声明更稳妥） */
word-break: break-word; /* 处理超长无空格字符串（如 URL、长单词） */
margin-top: 0.5rem;
font-size: 0.875rem;
line-height: 1.4;
}? 为什么 flex-basis: 0 有效？
当 flex-basis 为 0 时，Flex 项不再以自身内容为起点计算尺寸，而是将全部主轴空间视为“可分配资源”。此时 flex-grow: 1 触发等比分配，每个 <figure> 获得的空间完全由其内部 <img> 的渲染尺寸（由 height 和 aspect-ratio 动态推导）决定——文本则退居次级角色，在分配后的固定宽度内自然换行。
⚠️ 注意事项：
- 必须配合 flex-grow: 1（或 flex: 1），否则 flex-basis: 0 会导致所有项收缩至最小内容宽度；
- 若需保留不同 <figure> 的宽度差异（如方形图 vs 宽屏图），切勿对 <figure> 设置 width 或 max-width，这会覆盖 aspect-ratio 的计算逻辑；
- 在旧版浏览器中，aspect-ratio 需用 padding-top 技巧降级，但 flex-basis: 0 本身兼容性极佳（IE11+ 支持）；
- 如需进一步优化排版，可为 <figcaption> 添加 min-width: 0（防止其在极端窄容器中拒绝收缩）。
此方案以最小侵入性达成最大可控性：既保持 HTML 语义清晰（<figure>/<figcaption>），又让 CSS 完全掌控尺寸逻辑，是现代响应式图文布局的推荐实践。
