flex在竖直方向自动伸缩

Question

怎么实现flex在竖直方向上自动伸缩呢？

比如下面的这个布局。
第一部门也就是最上面的一层是被内容给撑开的。
第二部门（中间区域）也是被内容给撑开的。
底部想要实现，根据屏幕的大小自动伸缩的。

请问这个布局使用弹性和来怎么实现呢？

Answer 1

設置 flex-grow: 1 代表剩餘空間要分配給該元素

先保證父元素是隨著屏幕大小變化 (height: 100%)，然後在給底部加個 flex-grow: 1 就好了。
因為 flex-item 預設是隨著內容大小變化，假設現在有個父元素和三個子元素，父元素高度為 1000px，子元素假設內容高度是 300px， 1000 - 300 * 3 = 100，100px 就是剩餘空間，當 child-3 設置了 flex-grow: 1 時，這 100px 就會通通給他，自然就是填滿了剩餘空間。

<div class="parent">
    <div class="child-1"></div>
    <div class="child-2"></div>
    <div class="child-3"></div>
</div>

例子:
Codepen