绝对尺寸与相对尺寸的弹性项目

这是本互动课程中最短的一节课。然而，它非常重要。请记住，本课程的目标是真正“理解”Flexbox模型的内部工作机制。

在前面的部分中我们已经学习了一些内容，这里也需要澄清几个重要概念。

绝对型和相对型弹性项目之间的真正区别是什么？

两者之间最主要的区别在于尺寸的计算方式。

相对型弹性项目的尺寸是根据其内容大小来计算的。而绝对型弹性项目则完全基于“flex”值，与内容大小无关。

示例不是另一种教学方式，而是唯一的教学方式。

——阿尔伯特·爱因斯坦

下面是一个很好的例子。

考虑以下标记结构：

1<ul>
2	<li>
3		这只是为了说明观点而添加的一些随机文本。
4		更多随机文本用于进一步支撑所讨论的观点。
5	</li>
6
7	<li>这只是较短的一段随机文本。</li>
8</ul>

1ul {
2	display: flex; /* 启用 Flexbox */
3}
4
5li {
6	flex: auto; /* 注意：这等同于 flex: 1 1 auto */
7	border: 2px solid red;
8	margin: 2em;
9}

以下是运行结果：

如果你已经忘了，flex: 1 1 auto 等同于设置：flex-grow: 1、flex-shrink: 1，以及 flex-basis: auto。

按照我之前建立的框架，弹性项目的初始宽度会自动根据 flex-basis: auto 计算，然后根据 flex-grow: 1 值扩展以填充可用空间。

当弹性项目的宽度由 flex-basis: auto 自动计算时，其大小取决于项目内部内容的尺寸。

上述示例中的弹性项目内容大小并不相同，因此它们的宽度也不相等。

由于初始宽度本身就不同（基于内容），当它们扩展时，宽度依然保持不相等。

上述示例中的弹性项目是相对型弹性项目。

现在我们将弹性项目改为绝对型——即这次它们的宽度应基于“flex”值，而不是内容大小。

一个简单的“一行代码”就能实现这一效果。

1li {
2	flex: 1; /* 等同于 flex: 1 1 0。见 flex: '正数' 的用法 */
3}

以下是运行结果：

你是否注意到此时两个弹性项目的宽度相同了？

它们的初始宽度为零（flex-basis: 0），然后根据可用空间“增长”。

当有两个或更多弹性项目具有基于零的 flex-basis 值时，它们会根据 flex-grow 值来均分可用空间。

这一点我之前已经提到过。

现在，宽度不再基于内容大小计算，而是完全依据指定的 flex 值决定。

所以你明白了吗？没错！

绝对型弹性项目的宽度仅由 flex 值决定，而相对型弹性项目的宽度则基于内容大小。