网格布局

1）平均分配

　　在容器里面平均分配项目的大小空间，需要设置项目的自动缩放

　　代码演示HTML

　　<div class="Grid">

　　　　<div class="Grid-cell"></div>

　　　　<div class="Grid-cell"></div>

　　　　<div class="Grid-cell"></div>

　　　　<div class="Grid-cell"></div>

　　</div>

　　代码演示CSS

      .Grid{

　　　　display: flex;

　　 }

　　 .Grid-cell{

　　　　flex: 1;

　　}

2）百分比布局

　　某个网格的宽度为固定的百分比，其余的网格则是平分剩余的空间。

　　代码演示HTML

　　<div class="Grid">

　　　　<div class="Grid-cell"></div>

　　　　<div class="Grid-cell"></div>

　　　　<div class="Grid-cell"></div>

　　　　<div class="Grid-cell"></div>

　　</div>

网格布局

原文：http://www.cnblogs.com/yiyistar/p/6539485.html