flex布局

这里基础的属性就不多说明了。主要介绍一下 flex-grow / flex-shrink 这俩属性。

flex-shrink 缩放

<style>
    .wrapper{
        width: 600px;
        height: 300px;
        border: 1px solid #000;
        display: flex;
        /* flex-wrap: wrap; */
    }
    .content{
        width: 100px;
        /* flex-basis: 100px; */
        flex-shrink: 1;
        height: 100px;
        background: springgreen;
        /* border: 1px solid green; */
        /* box-sizing: border-box; */
    }
    .content:nth-of-type(2){
        width: 200px;
        flex-shrink: 1;
        background: skyblue;
    }
    .content:nth-of-type(3){
        width: 400px;
        flex-shrink: 3;
        background: blueviolet;
    }
    /* 100 * 1 + 200 * 1 + 400 * 3 == 1500 */
    /* 
        400 * 3
        -------    * 100px  == 80px  缩减80px
        1500
     */
</style>