Flex Box 简单弹性布局

　　弹性盒子模型有两种规范：早起的display:box 和后期的display:flex。它可以轻易的实现均分、浮动、居中等灵活布局，在移动端只考虑webkit内核时很实用。

一、display:box

    <div class="container">
        <div class="box1">box1<br/>固定宽度</div>
        <div class="box2">box2<br>占满剩余宽度</div>
    </div>

    <style type="text/css">
        .container{
            width: 400px;
            height: 120px;
            border: 1px solid #ccc;
            display: -webkit-box;
            display: box;
            -webkit-box-align: center;
            box-align: center;
            /*垂直方向对齐方式 box-align: start|end|center|baseline|stretch;*/
            /*水平方向对齐方式 box-pack: start|end|center|justify;*/
        }
        .box1,.box2{
            height: 100px;
            margin: 0;
            padding: 0;
        }
        .box1{
            background: #aaa;
            width: 100px;
        }
        .box2{
            background: #ccc;
            -webkit-box-flex:1.0;
            box-flex:1.0;
        }
    </style>

二、display:flex

    <div class="container">
        <div class="box1">固定宽度</div>
        <div class="box2">剩余空间的1/3</div>
        <div class="box3">剩余空间的2/3</div>
    </div>

    <style type="text/css">
        .container{
            width: 400px;
            height: 120px;
            border: 1px solid #ccc;
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: center;
            align-items: center ;
            /*水平方向对齐方式 justify-content: flex-start | flex-end | center | space-between | space-around;*/
            /*垂直方向对齐方式 align-items: flex-start | flex-end | center | baseline | stretch;*/
        }
        .box1,.box2,.box3{
            height: 100px;
        }
        .box1{
            background: #bbb;
            width: 100px;
        }
        .box2{
            background: #ccc;
            -webkit-flex:1;
            flex:1;
        }
        .box3{
            background: #ddd;
            -webkit-flex:2;
            flex:2;
        }
    </style>