flex布局

html片段

<div id="wrap">
    <div id="header">头部</div>
    <div id="content">主体部分</div>
    <div id="footer">底部</div>
</div>

css片段

#wrap{
    display: flex;
    flex-flow: column nowrap;   
    /**
     * flex-flow属性是: 
     * flex-direction: row | row-reverse | column | column-reverse 
     * 和
     * flex-wrap: nowrap | wrap | wrap-reverse 
     * 两个属性的简写形式
     */
    height: 100%;
}
#header{
    height: 2.4rem;
    background: #55CBC4;
    flex-grow: 0; 
    color: #fff;
    text-align: center;
    width: 100%;
    line-height: 2.4rem;
}

#content{
    flex: 1 1 1;
    /**
     * flex属性是：
     * flex-grow: <number>
     * flex-shrink: <number>
     * flex-basis: <length> | auto
     * 三个属性的简写形式
    */
    height: 100%;
}
#footer{
    height: 2.4rem;
    background: #eee;
    flex-grow: 0;
}

其他属性说明

属性	属性值	作用
flex-direction	row-横向 column-纵向	决定主轴方向
justify-content	flex-start 、 flex-end 、center 、space-between 、 space-around	在主轴方向上的对齐方式
align-items	flex-start 、 flex-end 、 center 、 baseline 、 stretch	与主轴垂直方向上的对齐方式
flex-grow		放大比例
flex-shrink		缩小比例
flex-basis	、auto	是否分配多余空间