基于flexbox的柵格化布局庫，提供更直觀、豐富的布局方式。
文檔與demo

npm

npm install flex-layout

優勢

flex-layout解決了css布局的不少問題:

• 應用一個class就可以垂直居中。
• 輕松實現多欄同高。
• 自動計算間距，實現等寬布局，不需要再計算margin。
• 支持自動填充剩余寬度，以往我們需要通過觸發BFC來實現。
• 支持自動填充剩余高度，比如將footer置于底部。
• 隨意調整[柵格]順序，比如讓main比sidebar提前渲染出來。
• 豐富的對齊方式：上、下、左、右、左上、右上、左下、右下。

概述

與傳統的柵格化一樣，flex-layout基于容器(相當于Bootstrap的row) 和柵格(相當于Bootstrap的column) 來布局:

• [容器]有兩種： flex-column: 容器里的[柵格]以橫向排列，與傳統柵格化的row一樣 flex-row: 容器里的[柵格]以豎向排列，就像header、content、footer的排列一樣

• 通常，只有[柵格]可以直接放在[容器]中，而你的內容應該放在[柵格]里。但這不是必須的，直接把內容放在[容器]里也沒問題。

• 如果一個[容器]里包含的[柵格]超過24格，多出的部分將另起一行。
• IE的話只兼容IE10+，其他主流瀏覽器都支持。
• Flexbox有主軸，副軸的概念，flex-layout已經封裝好了，你不需要懂得flexbox，也無需針對不同軸使用不同的class。不過，如果你對Flexbox有所了解的話，用起來會更順手。
• 與Bootstrap等柵格化不同的是：flex-layout不需要container，柵格本身不自帶padding。

項目主頁：http://www.baiduhome.net/lib/view/home/1440421850810