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

2,332 阅读1分钟
<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>

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