flex制作的常用布局

flex制作的常用布局

两端宽度定值，中间自适应

<div class="module">
    <div class="module_l">
        <div>
            left1
        </div>
        <div>
            left2
        </div>
    </div>
    <div class="module_c">
        center
    </div>
    <div class="module_r">
        right
    </div>
</div>

<style lang="scss">
.module {
    $wl: 100px;
    $wr: 100px;
    display: flex;
    background-color: #fff;
    margin-bottom: 20px;
    padding: 20px;
    &_l,
    &_c,
    &_r {
        border: 1px solid #f00;
    }

    &_l {
        width: $wl;flex-shrink: 0;
    }

    &_c {
        flex-grow: 1;
    }

    &_r {
        width: $wr;flex-shrink: 0;
    }
}
</style>

左侧宽度定值，右侧自适应

<div class="module">
    <div class="module_l">
        <div>
            left1
        </div>
        <div>
            left2
        </div>
    </div>
    <div class="module_r">
        right
    </div>
</div>

<style lang="scss">
.module {
    $wl: 100px;
    display: flex;
    background-color: #fff;
    margin-bottom: 20px;
    padding: 20px;
    &_l,
    &_r {
        border: 1px solid #f00;
    }
    &_l {
        width: $wl;flex-shrink: 0;
    }
    &_r {
        flex-grow: 1;
    }
}
</style>