Ahmad Shadeed 涵盖了 CSS fit-content
尺寸关键字。它非常有用!只是它并不经常出现。我发现自己更多地使用min-content
,例如在设置grid-template-row
的高度时。
fit-content
关键字实际上与min-content
和max-content
密切相关——它只是遵循一个小的启发式方法,Ahmad 很好的将其用流程图进行了说明。

我最喜欢的用例在这里有介绍:使用 fit-content
对 <figure>
进行大小调整,使其整齐地包裹在 <img>
周围。这样,即使图像没有填满父空间,它也可以保持块级。
我们去年还介绍了 PPK 关于 fit-content
的深入探讨。理解它的一个关键要点是知道它本质上是编写以下内容的一种简写方式
.box {
width: fit-content;
/* ... is the same as ... */
width: auto;
min-width: min-content;
max-width: max-content;
}