本文介绍在 Flex 布局中，通过 flex-direction: column 与 width: min-content 组合，使容器宽度严格由图片尺寸决定，文本自动换行且不参与宽度计算的纯 CSS 实现方案。
本文介绍在 flex 布局中，通过 `flex-direction: column` 与 `width: min-content` 组合，使容器宽度严格由图片尺寸决定，文本自动换行且不参与宽度计算的纯 css 实现方案。
在响应式或内容驱动的 UI 设计中，常需确保图文组合区域（如卡片标题区、媒体摘要块）的宽度由图像主导，而非被长文本意外拉伸。默认的 display: flex（即 flex-direction: row）会让子元素沿主轴并排，此时文本内容可能扩大容器总宽；而改用垂直流式 Flex + 最小内容宽度约束，即可精准解耦尺寸控制逻辑。
核心思路是：
✅ 将 Flex 主轴设为垂直方向（flex-direction: column），使图片与文本上下堆叠；
✅ 对容器设置 width: min-content，使其宽度收缩至内部“最窄固有宽度”元素——即显式设置了 width 的 ；
✅ 文本元素无需设置固定宽，仅需启用自然换行（浏览器默认行为），配合 text-align 等美化属性即可。
以下是完整可运行代码示例：
<style>
.img_box {
display: flex;
flex-direction: column;
width: min-content; /* 关键：容器宽度 = 图片固有宽度 */
margin: 0 auto; /* 可选：居中显示 */
}
.img_box img {
width: 200px; /* 显式设定图片宽度，成为容器宽度基准 */
height: auto; /* 保持宽高比 */
display: block; /* 避免底部空白间隙 */
}
.img_box div {
margin: 8px 0 0; /* 上间距分隔图文 */
text-align: justify; /* 可选：两端对齐提升可读性 */
/* 不设 width / max-width，确保不干扰容器宽度计算 */
}
</style>
<div class="img_box">
<img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Profile Image">
<div>Title text of some variable length. Can sometimes be wider than the image, sometimes smaller — and it will wrap cleanly without expanding the box.</div>
</div>⚠️ 注意事项：
- min-content 是现代 CSS 标准属性，兼容性良好（Chrome 57+/Firefox 66+/Safari 14.1+），但若需支持旧版 Safari（
- 图片必须显式设置 width（如 200px、100% 或 clamp() 响应式值），否则 min-content 将回退到图片原始尺寸，失去可控性；
- 避免对文本容器设置 white-space: nowrap 或 flex-shrink: 0 等阻止换行/收缩的样式，否则可能破坏宽度约束；
- 若需响应式适配，可将图片 width 改为 max-width: 100%; width: auto; 并配合父容器 max-width 控制上限，同时保留 min-content 的容器逻辑。
该方案完全基于 CSS，无需 JavaScript 计算尺寸，性能高效、语义清晰，是构建健壮图文布局的理想实践。
