左右固定宛渐，中間自適應(yīng)（雙飛翼或者圣杯布局）

• 頁(yè)面結(jié)構(gòu)

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

• 1：flex布局，父盒子設(shè)置彈性盒眯搭，兩端固定窥翩，中間flex:1

.flex {
    display: flex;
    height: 200px;
    .left {
        width: 100px;
        background: #FF4A94;
    }
    .center {
        background: #FF2424;
        /*flex:1*/
        /*等價(jià)于*/
        flex-grow: 1;
    }
    .right {
        width: 200px;
        background: #FF4A94;
    }
}

• 2：父盒子固定定位，兩邊絕對(duì)定位鳞仙，中間盒子margin撐開(kāi)寇蚊，高度100%

.flex {
    position: fixed;
    width: 100%;
    height: 200px;
    .left {
        position: absolute;
        left: 0;
        top: 0;
        width: 100px;
        height: 20px;
    }
    .center {
        margin: 0 100px;
        height: 100%;
    }
    .right {
        position: absolute;
        right: 0;
        top: 0;
        width: 100px;
        height: 200px;
    }
}

• 3：左右盒子浮動(dòng)，中間margin撐開(kāi)

注意：需要把結(jié)構(gòu)該一下棍好，右邊的盒子寫(xiě)在中間盒子前面仗岸，浮動(dòng)只會(huì)影響后面的盒子

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

.flex {
    width: 100%;
    height: 200px;
    .left {
        float: left;
        width: 100px;
        height: 200px;
    }
    .right {
        float: right;
        width: 100px;
        height: 200px;
    }
    .center {
        margin: 0 100px;
        height: 100%;
    }
}

左邊固定右邊自適應(yīng)

前三種方法跟上邊一樣不多贅述

• 給右邊的盒子設(shè)置特殊定位（此種方法同樣適用上下結(jié)構(gòu)）

.flex {
    position: relative;
    width: 100%;
    height: 200px;
    .left {
        width: 100px;
        height: 200px;
    }
    .right {
        /* 四個(gè)坐標(biāo)都寫(xiě) */
        position: absolute;
        left: 100px;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100px;
        height: 200px;
    }
}

• calc計(jì)算出盒子寬度

有兼容性問(wèn)題慎用

.flex {
    width: 100%;
    height: 200px;
    .left {
        float: left;
        width: 100px;
        height: 100%;
    }
    .right {
        /* 四個(gè)坐標(biāo)都寫(xiě) */
        margin-left: 100px;
        width: calc(100% - 100px);
        height: 100%;
    }
}

上端固定下端自適應(yīng)

• 上端固定定位允耿，下端給高度100%，再給下面的盒子加一個(gè)padding值（左右結(jié)構(gòu)同理扒怖？）

.flex {
    width: 100%;
    height: 200px;
    .top {
        position: fixed;
        width: 100%;
        height: 100px;
    }
    .bottom {
        width: 100%;
        height: 100%;
        padding-top: 100px;
    }
}

• 彈性盒布局

.flex {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 200px;
    .top {
        width: 100%;
        height: 100px;
    }
    .bottom {
        width: 100%;
        flex: 1;
    }
}

總結(jié)：根據(jù)個(gè)人喜好選擇方法右犹，本人喜歡彈性盒方式，幾乎所有的布局都能解決姚垃，簡(jiǎn)單粗暴