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 是否分配多余空间