去掉这几个 flex 项目，只留下 3 个。

flex-grow

现在水平排完这几个子项目以后，flex 容器还剩下一部分空间。我们可以把这部分空间分配给某些 flex 项目，在 flex 项目的上面用 flex-grow 可以设置一下分配的空间。

比如在这个 .box.three 里面，把 flex-grow 设置成 1，这样剩余的空间都会分配给 3 号元素。再这样试一下，用 .box.two 作为选择器，把它的 flex-grow 设置成 2，然后把 .box.three 里的 flex-grow 改成 3。

现在 flex 容器的剩余空间会分配给 2 号还有 3 号元素，2 号占用 2/5 的空间，3 号占用 3/5 的空间。

flex-basis

用 flex-basis 可以设置 flex 项目的初始尺寸。用 .box 作为样式选择器，设置一下 flex 项目的 flex-basis 这个样式属性。

这个属性默认的值是 auto，意思就是根据项目的 width 还有 height 属性来决定尺寸。如果把它的值改成 content，项目的尺寸会自动根据它的内容来调节。

flex-basis 的值还可以是一个具体的宽度值，比如 110px。意思就是 flex 项目的基本尺寸是 110 像素。现在界面上只有 1 号元素的宽度是 110 像素。第一行剩下的空间被 2 号元素占了，3 号元素会在新的一行显示。

这是因为 flex 容器的 flex-wrap 现在是 wrap，这里把它改成 nowrap。

现在 3 个元素会在同一行显示，每个项目的 flex-basis 都是 110px，回到一块儿的尺寸已经超过了 flex 容器的宽度。默认这几个元素会平均分配容器的空间。

flex-shrink

在这种空间不够用的情况下，用 flex-shrink 可以控制 flex 项目的收缩程度，谁的值越大，谁的收缩程度也就越大。我们先在 .box 里面，把 flex 项目的 flex-shrink 统一设置成 1 。

然后在 2 号元素上面，单独再把 flex-shrink 设置成 5。你会发现，界面上这几个元素，2 号元素收缩的程度最大，因为它的 flex-shrink 属性的值是这几个项目里最大的。

调试

在开发者工具，元素这里，选中 #app 元素，鼠标放在元素的宽度属性上面，左右拖拽鼠标调整一下元素的宽度，然后观察一下 flex 容器里的这几个项目的尺寸的变化。