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>