现在让我们回到第一个例子，看看是如何控制 flex 项占用空间的比例的。打开你本地的 弹性盒子 0.html，或者拷贝 弹性盒子 1.html 作为新的开始（查看线上）。

第一步，将以下规则添加到 CSS 的底部：

这是一个无单位的比例值，表示每个 flex 项沿主轴的可用空间大小。本例中，我们设置 元素的 flex 值为 1，这表示每个元素占用空间都是相等的，占用的空间是在设置 padding 和 margin 之后剩余的空间。因为它是一个比例，这意味着将每个 flex 项的设置为 400000 的效果和 1 的时候是完全一样的。

现在在上一个规则下添加：

现在当你刷新，你会看到第三个 元素占用了两倍的可用宽度和剩下的一样——现在总共有四个比例单位可用。前两个 flex 项各有一个，因此它们占用每个可用空间的 1/4。第三个有两个单位，所以它占用 2/4 或者说是 1/2 的可用空间。

你还可以指定 flex 的最小值。尝试修改现有的 article 规则：

这表示“每个 flex 项将首先给出 200px 的可用空间，然后，剩余的可用空间将根据分配的比例共享”。尝试刷新，你会看到分配空间的差别。

弹性盒子的真正价值可以体现在它的灵活性/响应性，如果你调整浏览器窗口的大小，或者增加一个 元素，这时的布局仍旧是好的。