Flex三栏布局

1、中间自适应宽度，两边固定宽度

<style>
    .flex-box{
        display: flex;
        height:200px;
        width:100%;
        background:red;
    }

    .item2{
        flex-grow:1;
        background:red;
    }
</style>

<div class="flex-box">
    <div class="item1" style="width:200px;background:yellow">
        左
    </div>
    <div class="item2">
        中
    </div>
    <div class="item3"  style="width:200px;background:yellow">
        右
    </div>
</div>

其中flex-grow是属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

• 当flex-grow的值为1，即上面例子，则表示剩余宽度（item2的宽度）= flex-box的总宽 - item1 - item2 - 文字宽度

2、左边固定宽度，中间、右边自适应

<style>
    .flex-box{
        display: flex;
        height:200px;
        width:100%;
        background:red;
    }

    .left{
        width:100px;
        background:yellow;
    }

    .right{
        flex-grow:2;
        background:yellow;
    }
    .center{
        flex-grow:2;
        background:red;
    }
</style>

<div class="flex-box">
    <div class="left">
        left
    </div>
    <div class="center">
        center
    </div>
    <div class="right">
        right
    </div>
</div>

其中center和right的flex-grow的值都为1，即剩余宽度center和right的比例是1：1

• 表示剩余宽度 = flex-box的总宽 - left的宽度 - 文字宽度（center宽度 = right宽度 = 剩余宽度/2）

3、flex-box设置宽度，且里面left、center、right总宽度大于flex-box的宽度

<style>
    .flex-box{
        display: flex;
        height:200px;
        width:400px;
        background:red;
    }

    .left{
        width:300px;
        flex-shrink:2;
        background:yellow;
    }

    .center{
        width:300px;
        flex-shrink:2;
        background:red;
    }

    .right{
        width:300px;
        flex-shrink:3;
        background:yellow;
    }
</style>

<div class="flex-box">
    <div class="left">
        left
    </div>
    <div class="center">
        center
    </div>
    <div class="right">
        right
    </div>
</div>

其中left、center和right的flex-shrink的值为2：2：3，即剩余宽度center和right的缩小比例是2：2：3（right最小）

• 表示剩余宽度 = flex-box的总宽 - 文字宽度（center宽度 = right宽度 = 剩余宽度/2）