flex-item 的属性观察重点：
先看每个 flex-item 的 flex-basis 是多少，如果有多出来的则会透过 flex-grow 分配；如果空间不足，则会都过 flex-shrink 分配。
预设 flex-basis 是 auto，也就是会随内容宽成长。
当我们使用 display: flex 其实使用的是 display: box flex;，也就是这个元素会以 block 的方式排版，但内部的内容会用 flex 的方式排版。
在下面的例子中，灰色表示在 flex-container 中多余的空间；橘色表示 flex-item 的外框（outline）。
如果 flex-item 没有给宽度的话，会完全缩在一起。
flexbox item 的大小预设值
flexbox 的 flex item 有一个非常重要的假设，flex-item 的大小预设不能比其内容大小来的小，因为 flex-item 的预设值是：
在下面这个例子中，flex-item-lg 的宽度变成了和父层的宽度一样都是 300px，使得 flex-item-lg + flex-item-sm 的宽度超过了 flex-container：
如果有足够的空间时，则所有的 flex-item 会以它自身的宽度为最大宽度（因为预设是 flex-basis: auto;）但若没有足够的空间时，则 flex-item 会根据比例缩小（因为预设是 flex-shrink: 1;），不会维持所给定的宽度。
Flex Basis
当父层 flex-container 的宽度，在扣除掉每一个 flex-item 的 flex-basis 的宽度后，如果有多出来的空间，则会透过 flex-grow 分配剩下来的空间；相反地，如果空间不够的话，则会透过 flex-shrink 缩小不足够的空间。
❗ flex-basis 即使设为 auto 仍然会有宽度，其宽度就是内容的宽度。
简单来说，当没有设定 flex-basis 的情况下（预设是 auto），则会以该容器的所设定的 width 为准，如果该容器没设定 width，则会以内容的宽度为准。这也就是为什么没有设定 flex-basis 的时候，该 flex-item 会等同于内容宽。
下面的说明是在 Chrome 测试下的结果。