flex 垂直方向三栏布局-首尾固定中间自适应

<div class='wrap'>
    <div class='box1'></div>
    <div class='box2'></div>
    <div class='box3'></div>
</div>
<style>
    .wrap{
        height: 100%;
        display flex
        flex-direction:column
    }
    .box2{
        flex-grow: 1;
    }
    .box1,.box2{
        flex 0 0 100px
    }
</style>

固定宽高的可直接设置宽高，有时候会无效，可如上设置