上下 置顶， 中间自由伸缩
爷爷： height: 100% 或者固定值, 不然下层都是撑开
父 :
display: flex;
flex-direction: column;
height: 100%; // 保证充满 当前容器
子：
header flex: none,
body： overflow：scroll； height: 100%; // 保证把 header footer 顶到底
footer: flex: none,
左自由，右固定
<div> 父级固定宽度， 可以为 %，或具体数值
<div > // 设置display flex， justify-content
<div> // 设置 display flex overflow： hidden
<div> // 设置 文本超出身略 ellipsis </div>
<icon> // 设置 图标固定宽度flex: 0 0 0.1rem
</div>
<div> // flex: none, width: 固定宽度值
内容
</div>
</div>
</div>