Ahmad Shadeed:CSS fit-content 的用例

Avatar of Chris Coyier
Chris Coyier 发布

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费积分!

Ahmad Shadeed 涵盖了 CSS fit-content 尺寸关键字。它非常有用!只是它并不经常出现。我发现自己更多地使用min-content,例如在设置grid-template-row的高度时。

fit-content关键字实际上与min-contentmax-content密切相关——它只是遵循一个小的启发式方法,Ahmad 很好的将其用流程图进行了说明。

Ahmad Shadeed's flow chat illustrating the way browsers handle the CSS fit-content keyword.
“CSS fit-content 的用例” 由 Ahmad Shadeed 撰写

我最喜欢的用例在这里有介绍:使用 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;
}

直接链接 →