Flex布局——flex-basis、flex-grow、flex-shrink

1. 前言

Flex布局的基础以及其他属性，请参考上篇：https://blog.csdn.net/joyce_lcy/article/details/86544661 。

为什么会把这个部分抽出来单独作为一篇呢？因为这三个属性不太容易理解并且需要搭配在一起使用。

2. 剩余空间

剩余空间：是父容器在主轴上可以被项目瓜分的空间。

以下图为例，黑色边框是父容器，ABC是项目。白色区域为剩余空间，300px - 50px - 80px - 50px = 120px，计算公式如下：

剩余空间 = container.with - A.width - B.width - C.width

 <ul>
    <li class="a">A</li>
    <li class="b">B</li>
    <li class="c">C</li>
</ul