flexbox是CSS3提出的頁面布局模塊。flexbox可以把列表橫向或者縱向排列，並且填滿可以延伸到的空間。稍微復雜的布局可以通過嵌套flex container來實現。
利用flexbox可以方便的創建彈性布局，這使得在移動設備上，可以讓元素在容器內擴展和收縮，更容易的實現常見布局，如三列布局。
彈性容器和彈性塊
一個flex container中包含了left content right三個彈性塊。
可以設置display為flex讓塊變為彈性塊。
可以設置flex-flow來確定彈性塊的布局方向，設置為row，橫向布局，設置為cloumn,縱向布局：
彈性塊可以多行或單行排列。可以設置wrap讓其多行排列，如圖：
橫向布局需要指定各塊的寬度，可以為固定寬度，如300px,也可設置為比例寬度，如flex:1,含義是占除指定了width之外的剩余空間的N分之一的寬度，N是總份數。
其高度是彈性容器的高度。
如圖：
縱向高度是類似的情況。
一個綜合例子：
<!DOCTYPE html> <html> <head> <style> .container{ background:#a1a1a1; display:flex; flex-flow:row; height:500px; } .main { width: 60%; } .left { flex: 1; background:pink; } .right { flex: 2; background:pink; } </style> </head> <body> <div class="container"> <nav class="nav left">…</nav> <section class="main"> Winter comes after autumn.It snows heavily here.... </section> <nav class="nav right">…</nav> </div> </body> </html>
效果：
瀏覽器支持：為了更廣泛的支持瀏覽器，需要考慮添加支持老語法版本的flexbox.上述例子在FF23.0.1運行OK。
參考英文文檔：http://helephant.com/2013/03/23/css3-flexbox-layout/