CSS Flexbox 學習指南、工具與框架
Flexbox 是一種更有效的布局方式，它能更好的分配容器空間，并控制項目的對齊。雖然，掌握它的理論有些復雜，但幸運的是，我們可以借助開放的網絡來學習并逐步掌握它。
在本文中，我們整合了一些最佳的 Flexbox 學習資源，它們可以幫助你了解Flexbox 的方方面面。涉及什么是 Flexbox，以及如何有效地使用它。
Flexbox 學習指南
CSS 之 Flexbox 參考（作者：Sara Soueidan）
CSS 之 Flexbox 參考 是學習 Flexbox 基礎知識的系列文章。在文章中，你可以學習 Flexbox 的各種屬性，并通過文中那些優秀的交互演示來更好的理解它們。
深入了解 Flexbox — 設計、工具和工作流程（作者：Greg Smith）
在 《深入了解 Flexbox》 文章中，我們將詳細地了解 Flexbox 的簡史，以及其語法的技術細節等內容。
譯者注：中文翻譯 —— 【 傳送門 】
使用 CSS 彈性盒子（作者：MDN）
本文源自 Mozilla 開發者網絡。 在文章中 ，作者將向你介紹 Flexbox 的布局模式，文中還提供了瀏覽器兼容性圖表供你查閱。
一個完整的 Flexbox 指南（作者：Chris Coyier）
或許， 這個完整的 Flexbox 指南 能讓你了解關于 Flexbox 的一切。文章中包含了大量的實例，能助你更快地掌握它。
譯者注：中文翻譯 —— 【 傳送門 】
如何開始使用 CSS Flexbox（作者：Paul Underwood）
這個教程 將指導你利用 CSS Flexbox 從設置簡單的布局開始，逐步帶你掌握更復雜的布局實例。
CSS3 Flexbox 屬性可視化指南（作者：Dimitar）
這本可視化指南 ，不僅能夠幫助你了解 CSS3 Flexbox 的基本概念，而且能夠向你展示 Flexbox 的各個屬性是如何影響頁面布局的。
譯者注：中文翻譯 —— 【 傳送門 】
什么是 Flexbox ？！（作者：Wes Bos）
這個教程將利用 20 個免費視頻來助你解鎖 Flexbox 布局的技能！有時候，通過視頻教程的學習往往比復雜的探討效果要好很多。
5 分鐘學 Flexbox（互動之旅）
如果你厭倦閱讀長篇教程，那么 5 分鐘學Flexbox 會更適合你。這是一個簡單的交互教程，你將在短短的 5 分鐘內，通過 53 張幻燈片來了解什么是 Flexbox 以及它如何應用。
Flexbox 實例和資源
Flexbox 模式（作者：CJ Cenizal）
Flexbox 模式 將通過一些代碼實例帶你開啟 Flexbox 的學習之旅。
Flexbox 解決方案（作者：Philip Walton）
Flexbox 解決方案 將為你展示運用 Flexbox 來解決特定問題的示例。
Atom 上 Flexbox 代碼自動補全插件
這個插件 讓你在 Atom 編輯器中編寫 Flexbox 代碼，變得輕而易舉。
Sublime Text 上 Flexbox 代碼自動補全插件
與上述插件的功能相似，你可以在 Sublime Text 編輯器中使用。
基于 Web 的 Flexbox 工具
Flexplorer（作者：Bennett Feely）
Flexplorer 是一款可以通過簡單的可視化界面，創建復雜布局的工具。
CSS Flexbox Please!（作者：Eiji Kitamura）
CSS Flexbox Please! 是一款能夠自動生成 Flex 布局的在線工具。同時，它也提供了相應的 CSS 與 HTML 代碼。
Test CSS Flexbox Rules Live（作者：Tayler Summs）
實時測試 CSS Flexbox 規則 這款在線工具，將為你演示 Flex 的每個屬性是如何影響布局的。
Flexbox Tester （作者：Eiji Kitamura）
Flexbox Tester 能夠幫助你了解如何計算 Flex item 的寬度。
Flexibility（作者：10up）
Flexibility 上的直觀的菜單能幫助你了解，各種 Flex 屬性是如何更改 Flexbox 布局的。
Fibonacci Flexbox 頁面布局編寫器（作者：Max Steenbergen）
Fibonacci Flexbox 頁面布局編寫器 是一款面向非開發人員的布局工具，你可以使用它來創建 Flex 布局。
Flexy Boxes（作者：Pete Boere）
Flexy Boxes 將幫助你生成 Flex 布局，并可以同時調整 Flex 容器和項目的屬性。
Flexbox Playground（作者：Gabi Siquès）
Flexbox Playground 將通過多樣化的展示讓你感受 Flex 屬性的強大功能。
譯者注：這個作品獲得了 2016 年 CodePen 上十佳作品之 NO.1.
Flexbox Editor（作者：Brian Diehr）
你可以在 Flex Box Editor 上通過拖拽框盒子的方式，并調整其屬性來測試你的 Flex 布局。
譯者注：這個工具已經失效了。:（
基于 Flexbox 的 Web 框架
Flexbox 網格 - 基于 Flexbox 的網格系統
Flexbox Grid 是一個易用的框架，它擁有的大量實例用于創建各種類型的布局。
cssPlus - 基于 Flexbox 的布局腳手架
cssPlus 幫助你創建基于 Flexbox 的靈活、響應式的布局。
STRUCTURE - 基于 Flexbox 的聲明式網格框架
STRUCTURE 是一個聲明式框架 - 這意味著它對元素使用了非標準屬性。這樣可以減少開發時間，而不是向每個項目中添加幾個 CSS 類。
Juiced – Flexbox CSS 框架
Juiced 的創作靈感源自 Foundation 與 Bootstrap，它是一款靈活的 CSS 前端框架，對現存基于網格的 CSS 框架有了諸多的改進。同時，它建立在彈性盒布局規范上。
彩蛋
Flexbox Froggy（作者：Thomas Park）
通過做一些有趣的游戲，來感受學習的快樂。 Flexbox Froggy 就是一款需要你編寫 Flexbox 代碼才能通關的游戲哦。
最后
當你合理使用 Flexbox 布局時，它甚至可以將復雜的布局任務化繁為簡。那么，從今天開始使用這些資源，提高你的開發效率吧！
是不是，還有些不過癮。那么，譯者再補充一些不錯的資源，讓你學到吐....
No! No! No! 應該是學到 High.
速查表
The Ultimate Flexbox Cheat Sheet
號稱 終極版 Flexbox 屬性速查表 ，還有 這個速查表 也不錯，你可以其下載 PDF 版本進行查閱。
譯者注： 終極版 Flexbox 屬性速查表中文版
教程
- Flexbox 入門到精通
你會發現，譯文的大部分中文翻譯版都是來自這里。同時，感謝大漠老師。 - Flex 布局教程：語法篇
- Flex 布局教程：實例篇
這兩篇文章來自于阮一峰老師，作者將帶大家通俗易懂的了解 Flex 布局的語法，以及常見 Flex 布局的寫法。
感謝你的閱讀，如果覺得文章不錯，不妨點個贊。
來自：http://www.jianshu.com/p/bfd11e45efa9