CSS `Intrinsic Sizing` (`min-content`, `max-content`, `fit-content`) 结合 `Grid` / `Flex`

各位观众，各位朋友，大家好！我是你们的老朋友，今天咱们来聊聊 CSS 里的“内功心法”——Intrinsic Sizing，也就是min-content、max-content、fit-content这几个哥们儿，再看看它们和 Grid、Flexbox 这两位大侠是怎么配合的。

说起 CSS 布局，大家可能最先想到的是什么 float、position，后来又有了 Flexbox 和 Grid，简直是翻天覆地的变化。但是，光有这些“外功”还不够，想要真正玩转布局，还得掌握一些“内功”，也就是内容本身的尺寸特性。

一、什么是 Intrinsic Sizing？

简单来说，Intrinsic Sizing 就是元素尺寸由其内容决定的特性。它不像我们平时用 width: 100px 这样直接指定尺寸，而是让元素根据内容“自由发挥”。这就好比练武，外功是招式，内功是真气，没有真气，招式再花哨也使不出来。

CSS 提供了三个关键词来控制这种“自由发挥”的程度：

• min-content: 元素宽度尽可能小，但又不能让内容溢出。通常情况下，它会尽可能地将内容折行（如果是文本），或者让图片缩小到最小尺寸。对于表格，意味着表格列宽尽可能小，但足以容纳单元格中的内容。

• max-content: 元素宽度尽可能大，尽可能地把内容放在同一行，不换行。对于图片，会使用其原始尺寸。表格也会尽可能地展开列宽，避免折行。

• fit-content(length): 元素宽度不超过指定的 length 值，同时尽可能地撑满可用空间，但不会超过 max-content。可以理解为“适应内容，但有个上限”。

二、min-content、max-content、fit-content 的实战演练

光说不练假把式，咱们直接上代码。

1. min-content 的妙用

假设我们有一个按钮，按钮上的文字很长，我们希望按钮的宽度随着文字长度自适应，但是又不能太宽，最好能自动换行。

<div class="container">
  <button class="button">这是一个非常非常非常非常非常长的按钮</button>
</div>

.container {
  width: 300px; /* 容器宽度 */
  border: 1px solid black;
}

.button {
  width: min-content;
  background-color: lightblue;
  padding: 10px;
}

在这个例子中，button 的 width 设置为 min-content。这意味着按钮会尽可能地缩小宽度，但又要保证文字不溢出。如果文字太长，就会自动换行。

2. max-content 的威力

现在，我们假设有一个标题，我们希望标题尽可能地在一行显示，不要换行。

<div class="container">
  <h1 class="title">这是一个非常非常非常非常非常长的标题</h1>
</div>

.container {
  width: 300px; /* 容器宽度 */
  border: 1px solid black;
  overflow: hidden; /* 防止内容溢出 */
}

.title {
  width: max-content;
  white-space: nowrap; /* 防止换行，确保在一行显示 */
}

这里，title 的 width 设置为 max-content，并且我们使用了 white-space: nowrap 来强制文本不换行。这样，标题就会尽可能地在一行显示，直到超出容器的宽度。

3. fit-content 的平衡之道

fit-content 就像一个聪明的管家，它会在给定的范围内，尽可能地让元素撑满空间，但又不会超过内容的固有大小。

<div class="container">
  <div class="box">这是一个短文本</div>
  <div class="box">这是一个非常非常非常非常非常长的文本</div>
</div>

.container {
  width: 300px;
  border: 1px solid black;
  display: flex; /* 使用 Flexbox 布局 */
  flex-direction: column;
}

.box {
  width: fit-content(200px); /* 最大宽度 200px */
  background-color: lightgreen;
  padding: 10px;
  margin-bottom: 10px;
}

在这个例子中，每个 box 的 width 都设置为 fit-content(200px)。这意味着：

• 如果 box 中的文本长度小于 200px，那么 box 的宽度会尽可能地撑满 200px。
• 如果 box 中的文本长度大于 200px，那么 box 的宽度会等于文本的 max-content 宽度，但不会超过 200px。

三、Intrinsic Sizing 与 Grid 的完美结合

Grid 布局的强大之处在于它可以轻松地创建复杂的二维布局。而 Intrinsic Sizing 可以让 Grid 的轨道（track）尺寸更加灵活。

1. min-content 在 Grid 中的应用

假设我们有一个 Grid 布局，我们希望 Grid 列的宽度尽可能小，但又要保证单元格中的内容不溢出。

<div class="grid-container">
  <div>Short</div>
  <div>Very Very Long Text</div>
  <div>Medium</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: min-content min-content min-content; /* 三列，每列宽度为 min-content */
  grid-gap: 10px;
  border: 1px solid black;
}

.grid-container > div {
  background-color: lightcoral;
  padding: 10px;
}

在这个例子中，grid-template-columns 设置为 min-content min-content min-content。这意味着 Grid 的每一列都会根据其内容自动调整宽度，尽可能地缩小，但又要保证内容不溢出。

2. max-content 在 Grid 中的应用

如果我们希望 Grid 的列尽可能地展开，让内容在一行显示，可以使用 max-content。

.grid-container {
  display: grid;
  grid-template-columns: max-content max-content max-content; /* 三列，每列宽度为 max-content */
  grid-gap: 10px;
  border: 1px solid black;
}

.grid-container > div {
  background-color: lightcoral;
  padding: 10px;
  white-space: nowrap; /* 确保文本不换行 */
}

3. fit-content 在 Grid 中的应用

fit-content 也可以用在 Grid 布局中，它可以限制 Grid 列的最大宽度。

.grid-container {
  display: grid;
  grid-template-columns: fit-content(150px) fit-content(150px) fit-content(150px); /* 三列，每列最大宽度 150px */
  grid-gap: 10px;
  border: 1px solid black;
}

.grid-container > div {
  background-color: lightcoral;
  padding: 10px;
}

4. 使用 fr 单位结合 Intrinsic Sizing

Grid 布局中的 fr 单位表示剩余空间的比例。我们可以将 fr 单位和 Intrinsic Sizing 结合使用，创建更加灵活的布局。

.grid-container {
  display: grid;
  grid-template-columns: min-content 1fr; /* 第一列宽度为 min-content，第二列占据剩余空间 */
  grid-gap: 10px;
  border: 1px solid black;
}

.grid-container > div:first-child {
  background-color: lightcoral;
  padding: 10px;
}

.grid-container > div:last-child {
  background-color: lightgreen;
  padding: 10px;
}

在这个例子中，第一列的宽度会根据其内容自动调整为 min-content，而第二列会占据剩余的所有空间。

表格总结：Grid 布局与 Intrinsic Sizing

CSS 属性	功能描述	示例
grid-template-columns	定义 Grid 列的宽度。可以结合 min-content、max-content、fit-content 和 fr 单位使用。	grid-template-columns: min-content 1fr; grid-template-columns: fit-content(150px) 1fr;
grid-template-rows	定义 Grid 行的高度。同样可以结合 min-content、max-content、fit-content 和 fr 单位使用。	grid-template-rows: min-content 1fr; grid-template-rows: fit-content(100px) 1fr;
grid-auto-columns	用于设置隐式创建的 Grid 列的宽度。当 Grid 项目超出显式定义的 Grid 轨道时，Grid 会自动创建新的轨道。这个属性可以控制这些自动创建的轨道的尺寸。	grid-auto-columns: min-content;
grid-auto-rows	用于设置隐式创建的 Grid 行的高度。类似于 grid-auto-columns，但作用于行。	grid-auto-rows: min-content;

四、Intrinsic Sizing 与 Flexbox 的珠联璧合

Flexbox 布局主要用于控制一维布局（行或列）。Intrinsic Sizing 可以让 Flexbox 项目的尺寸更加灵活。

1. min-content 在 Flexbox 中的应用

假设我们有一排 Flexbox 项目，我们希望每个项目的宽度尽可能小，但又要保证内容不溢出。

<div class="flex-container">
  <div>Short</div>
  <div>Very Very Long Text</div>
  <div>Medium</div>
</div>

.flex-container {
  display: flex;
  border: 1px solid black;
}

.flex-container > div {
  width: min-content; /* 每个项目的宽度为 min-content */
  background-color: lightseagreen;
  padding: 10px;
  margin-right: 10px;
}

在这个例子中，每个 Flexbox 项目的 width 设置为 min-content。这意味着每个项目都会根据其内容自动调整宽度，尽可能地缩小，但又要保证内容不溢出。

2. max-content 在 Flexbox 中的应用

如果我们希望 Flexbox 项目尽可能地展开，让内容在一行显示，可以使用 max-content。

.flex-container {
  display: flex;
  border: 1px solid black;
  overflow-x: auto; /* 允许水平滚动 */
}

.flex-container > div {
  width: max-content; /* 每个项目的宽度为 max-content */
  background-color: lightseagreen;
  padding: 10px;
  margin-right: 10px;
  white-space: nowrap; /* 确保文本不换行 */
}

3. fit-content 在 Flexbox 中的应用

fit-content 也可以用在 Flexbox 布局中，它可以限制 Flexbox 项目的最大宽度。

.flex-container {
  display: flex;
  border: 1px solid black;
}

.flex-container > div {
  width: fit-content(150px); /* 每个项目最大宽度 150px */
  background-color: lightseagreen;
  padding: 10px;
  margin-right: 10px;
}

4. 使用 flex-grow 结合 Intrinsic Sizing

Flexbox 布局中的 flex-grow 属性可以控制 Flexbox 项目如何分配剩余空间。我们可以将 flex-grow 属性和 Intrinsic Sizing 结合使用，创建更加灵活的布局。

<div class="flex-container">
  <div>Short</div>
  <div style="flex-grow: 1;">This will take up remaining space</div>
</div>

.flex-container {
  display: flex;
  border: 1px solid black;
}

.flex-container > div:first-child {
  width: min-content; /* 第一列宽度为 min-content */
  background-color: lightseagreen;
  padding: 10px;
  margin-right: 10px;
}

.flex-container > div:last-child {
  background-color: lightcoral;
  padding: 10px;
}

在这个例子中，第一个 Flexbox 项目的宽度会根据其内容自动调整为 min-content，而第二个项目会占据剩余的所有空间。

表格总结：Flexbox 布局与 Intrinsic Sizing

CSS 属性	功能描述	示例
width	定义 Flexbox 项目的宽度。可以结合 min-content、max-content 和 fit-content 使用。	width: min-content; width: max-content; width: fit-content(150px);
flex-grow	定义 Flexbox 项目如何分配剩余空间。可以结合 Intrinsic Sizing 使用，让 Flexbox 项目在保证内容完整性的前提下，尽可能地占据可用空间。	flex-grow: 1; width: min-content;
flex-shrink	定义 Flexbox 项目在空间不足时如何缩小。如果 Flexbox 项目的宽度设置为 max-content，并且 flex-shrink 设置为 0，那么项目将不会缩小，可能会导致内容溢出。	width: max-content; flex-shrink: 0;
flex-basis	定义 Flexbox 项目的初始大小。它可以是具体的长度值，也可以是 auto。如果设置为 auto，则项目的初始大小将由其内容决定，这与 Intrinsic Sizing 的概念类似。	flex-basis: auto;

五、总结与注意事项

Intrinsic Sizing 是一项非常强大的 CSS 技术，它可以让我们的布局更加灵活和自适应。但是，在使用 Intrinsic Sizing 时，也要注意以下几点：

• 内容溢出: 如果内容太长，可能会导致内容溢出容器。可以使用 overflow: hidden 或 overflow: auto 来解决这个问题。
• 性能问题: 在某些情况下，过度使用 Intrinsic Sizing 可能会导致性能问题。因为浏览器需要计算每个元素的尺寸，这可能会消耗大量的 CPU 资源。
• 兼容性: 虽然 Intrinsic Sizing 的兼容性已经很好，但是仍然需要注意一些旧版本的浏览器可能不支持这些特性。

总之，Intrinsic Sizing 是一把双刃剑，用好了可以事半功倍，用不好可能会适得其反。希望通过今天的讲解，大家能够更好地理解和使用 Intrinsic Sizing，让我们的 CSS 布局更加完美！

好了，今天的讲座就到这里。谢谢大家！ 咱们下回再见！