CSS flex: 1 子元素占据父元素剩余空间

场景

row横向实现：左右两个图片，中间文字的布局。

column纵向实现：底部栏永远在屏最底下，即使高度不够时也在屏幕底部。（高度够时需滚动才展示）

代码

横向：中间文字使用flex: 1占据剩余所有空间。

<div style="display: flex;justify-content: space-around;">
    <div>左图片</div>
    <div style="flex: 1">文字</div>
    <div>右图片</div>
</div>

纵向：中间元素设置flex: 1

<div style="display: flex;">
    <div>顶部栏</div>
    <div style="flex: 1">中间内容</div>
    <div>底部栏</div>
</div>