移动端布局常用方法

左右固定，中间自适应（双飞翼或者圣杯布局）

• 页面结构

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

• 1：flex布局，父盒子设置弹性盒，两端固定，中间flex:1

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

• 2：父盒子固定定位，两边绝对定位，中间盒子margin撑开，高度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：左右盒子浮动，中间margin撑开

注意：需要把结构该一下，右边的盒子写在中间盒子前面，浮动只会影响后面的盒子

<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%;
    }
}

左边固定右边自适应

前三种方法跟上边一样不多赘述

• 给右边的盒子设置特殊定位（此种方法同样适用上下结构）

.flex {
    position: relative;
    width: 100%;
    height: 200px;
    .left {
        width: 100px;
        height: 200px;
    }
    .right {
        /* 四个坐标都写 */
        position: absolute;
        left: 100px;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100px;
        height: 200px;
    }
}

• calc计算出盒子宽度

有兼容性问题慎用

.flex {
    width: 100%;
    height: 200px;
    .left {
        float: left;
        width: 100px;
        height: 100%;
    }
    .right {
        /* 四个坐标都写 */
        margin-left: 100px;
        width: calc(100% - 100px);
        height: 100%;
    }
}

上端固定下端自适应

• 上端固定定位，下端给高度100%，再给下面的盒子加一个padding值（左右结构同理？）

.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;
    }
}

总结：根据个人喜好选择方法，本人喜欢弹性盒方式，几乎所有的布局都能解决，简单粗暴