Flexbox 是一種更有效的布局方式纺荧，它能更好的分配容器空間，并控制項(xiàng)目的對(duì)齊颅筋。雖然宙暇，掌握它的理論有些復(fù)雜，但幸運(yùn)的是议泵，我們可以借助開(kāi)放的網(wǎng)絡(luò)來(lái)學(xué)習(xí)并逐步掌握它占贫。
在本文中，我們整合了一些最佳的 Flexbox 學(xué)習(xí)資源先口，它們可以幫助你了解Flexbox 的方方面面型奥。涉及什么是 Flexbox，以及如何有效地使用它池充。
Flexbox 學(xué)習(xí)指南
CSS 之 Flexbox 參考（作者：Sara Soueidan）
CSS 之 Flexbox 參考是學(xué)習(xí) Flexbox 基礎(chǔ)知識(shí)的系列文章桩引。在文章中，你可以學(xué)習(xí) Flexbox 的各種屬性收夸，并通過(guò)文中那些優(yōu)秀的交互演示來(lái)更好的理解它們坑匠。
深入了解 Flexbox — 設(shè)計(jì)、工具和工作流程（作者：Greg Smith）
在《深入了解 Flexbox》文章中卧惜，我們將詳細(xì)地了解 Flexbox 的簡(jiǎn)史厘灼，以及其語(yǔ)法的技術(shù)細(xì)節(jié)等內(nèi)容。
譯者注：中文翻譯 —— 【傳送門(mén)】
使用 CSS 彈性盒子（作者：MDN）
本文源自 Mozilla 開(kāi)發(fā)者網(wǎng)絡(luò)咽瓷。在文章中设凹，作者將向你介紹 Flexbox 的布局模式，文中還提供了瀏覽器兼容性圖表供你查閱茅姜。
一個(gè)完整的 Flexbox 指南（作者：Chris Coyier）
或許闪朱，這個(gè)完整的 Flexbox 指南能讓你了解關(guān)于 Flexbox 的一切月匣。文章中包含了大量的實(shí)例，能助你更快地掌握它奋姿。
譯者注：中文翻譯 —— 【傳送門(mén)】
如何開(kāi)始使用 CSS Flexbox（作者：Paul Underwood）
這個(gè)教程將指導(dǎo)你利用 CSS Flexbox 從設(shè)置簡(jiǎn)單的布局開(kāi)始锄开，逐步帶你掌握更復(fù)雜的布局實(shí)例。
CSS3 Flexbox 屬性可視化指南（作者：Dimitar）
這本可視化指南称诗，不僅能夠幫助你了解 CSS3 Flexbox 的基本概念萍悴，而且能夠向你展示 Flexbox 的各個(gè)屬性是如何影響頁(yè)面布局的。
譯者注：中文翻譯 —— 【傳送門(mén)】
什么是 Flexbox 寓免？Ｑ⒂铡（作者：Wes Bos）
這個(gè)教程將利用 20 個(gè)免費(fèi)視頻來(lái)助你解鎖 Flexbox 布局的技能！有時(shí)候袜香，通過(guò)視頻教程的學(xué)習(xí)往往比復(fù)雜的探討效果要好很多撕予。
5 分鐘學(xué) Flexbox（互動(dòng)之旅）
如果你厭倦閱讀長(zhǎng)篇教程，那么 5 分鐘學(xué)Flexbox 會(huì)更適合你蜈首。這是一個(gè)簡(jiǎn)單的交互教程嗅蔬，你將在短短的 5 分鐘內(nèi)，通過(guò) 53 張幻燈片來(lái)了解什么是 Flexbox 以及它如何應(yīng)用疾就。
Flexbox 實(shí)例和資源
Flexbox 模式（作者：CJ Cenizal）
Flexbox 模式將通過(guò)一些代碼實(shí)例帶你開(kāi)啟 Flexbox 的學(xué)習(xí)之旅澜术。
Flexbox 解決方案（作者：Philip Walton）
Flexbox 解決方案將為你展示運(yùn)用 Flexbox 來(lái)解決特定問(wèn)題的示例。
Atom 上 Flexbox 代碼自動(dòng)補(bǔ)全插件
這個(gè)插件讓你在 Atom 編輯器中編寫(xiě) Flexbox 代碼猬腰，變得輕而易舉鸟废。
Sublime Text 上 Flexbox 代碼自動(dòng)補(bǔ)全插件
與上述插件的功能相似，你可以在 Sublime Text 編輯器中使用姑荷。
基于 Web 的 Flexbox 工具
Flexplorer（作者：Bennett Feely）
Flexplorer 是一款可以通過(guò)簡(jiǎn)單的可視化界面盒延，創(chuàng)建復(fù)雜布局的工具。
CSS Flexbox Please!（作者：Eiji Kitamura）
CSS Flexbox Please! 是一款能夠自動(dòng)生成 Flex 布局的在線(xiàn)工具鼠冕。同時(shí)添寺，它也提供了相應(yīng)的 CSS 與 HTML 代碼。
Test CSS Flexbox Rules Live（作者：Tayler Summs）
實(shí)時(shí)測(cè)試 CSS Flexbox 規(guī)則這款在線(xiàn)工具懈费，將為你演示 Flex 的每個(gè)屬性是如何影響布局的计露。
Flexbox Tester （作者：Eiji Kitamura）
Flexbox Tester 能夠幫助你了解如何計(jì)算 Flex item 的寬度。
Flexibility（作者：10up）
Flexibility 上的直觀(guān)的菜單能幫助你了解憎乙，各種 Flex 屬性是如何更改 Flexbox 布局的票罐。
Fibonacci Flexbox 頁(yè)面布局編寫(xiě)器（作者：Max Steenbergen）
Fibonacci Flexbox 頁(yè)面布局編寫(xiě)器是一款面向非開(kāi)發(fā)人員的布局工具，你可以使用它來(lái)創(chuàng)建 Flex 布局泞边。
Flexy Boxes（作者：Pete Boere）
Flexy Boxes 將幫助你生成 Flex 布局该押，并可以同時(shí)調(diào)整 Flex 容器和項(xiàng)目的屬性。
Flexbox Playground（作者：Gabi Siquès）
Flexbox Playground 將通過(guò)多樣化的展示讓你感受 Flex 屬性的強(qiáng)大功能阵谚。
譯者注：這個(gè)作品獲得了 2016 年 CodePen 上十佳作品之 NO.1.
Flexbox Editor（作者：Brian Diehr）
你可以在 Flex Box Editor 上通過(guò)拖拽框盒子的方式蚕礼，并調(diào)整其屬性來(lái)測(cè)試你的 Flex 布局烟具。
譯者注：這個(gè)工具已經(jīng)失效了。:（
基于 Flexbox 的 Web 框架
Flexbox 網(wǎng)格 - 基于 Flexbox 的網(wǎng)格系統(tǒng)
Flexbox Grid 是一個(gè)易用的框架奠蹬，它擁有的大量實(shí)例用于創(chuàng)建各種類(lèi)型的布局净赴。
cssPlus - 基于 Flexbox 的布局腳手架
cssPlus 幫助你創(chuàng)建基于 Flexbox 的靈活、響應(yīng)式的布局罩润。
STRUCTURE - 基于 Flexbox 的聲明式網(wǎng)格框架
STRUCTURE 是一個(gè)聲明式框架 - 這意味著它對(duì)元素使用了非標(biāo)準(zhǔn)屬性。這樣可以減少開(kāi)發(fā)時(shí)間翼馆，而不是向每個(gè)項(xiàng)目中添加幾個(gè) CSS 類(lèi)割以。
Juiced – Flexbox CSS 框架
Juiced 的創(chuàng)作靈感源自 Foundation 與 Bootstrap，它是一款靈活的 CSS 前端框架应媚，對(duì)現(xiàn)存基于網(wǎng)格的 CSS 框架有了諸多的改進(jìn)严沥。同時(shí)，它建立在彈性盒布局規(guī)范上中姜。
彩蛋
Flexbox Froggy（作者：Thomas Park）
通過(guò)做一些有趣的游戲消玄，來(lái)感受學(xué)習(xí)的快樂(lè)。Flexbox Froggy 就是一款需要你編寫(xiě) Flexbox 代碼才能通關(guān)的游戲哦丢胚。
最后
當(dāng)你合理使用 Flexbox 布局時(shí)，它甚至可以將復(fù)雜的布局任務(wù)化繁為簡(jiǎn)携龟。那么，從今天開(kāi)始使用這些資源峡蟋，提高你的開(kāi)發(fā)效率吧坟桅！
是不是，還有些不過(guò)癮裕偿。那么旭绒，譯者再補(bǔ)充一些不錯(cuò)的資源，讓你學(xué)到吐....
No! No! No! 應(yīng)該是學(xué)到 High.
速查表
The Ultimate Flexbox Cheat Sheet
號(hào)稱(chēng)終極版 Flexbox 屬性速查表郭厌，還有這個(gè)速查表也不錯(cuò)，你可以其下載 PDF 版本進(jìn)行查閱华弓。
教程
-
Flexbox 入門(mén)到精通
你會(huì)發(fā)現(xiàn)，譯文的大部分中文翻譯版都是來(lái)自這里。同時(shí)评肆，感謝大漠老師淆衷。 - Flex 布局教程：語(yǔ)法篇
-
Flex 布局教程：實(shí)例篇
這兩篇文章來(lái)自于阮一峰老師排惨，作者將帶大家通俗易懂的了解 Flex 布局的語(yǔ)法，以及常見(jiàn) Flex 布局的寫(xiě)法碰凶。
感謝你的閱讀暮芭，如果覺(jué)得文章不錯(cuò)，不妨點(diǎn)個(gè)贊欲低。
注：
- 本文版權(quán)歸原作者所有辕宏，僅用于學(xué)習(xí)與交流。
- 如需轉(zhuǎn)載譯文砾莱，煩請(qǐng)按下方注明出處信息瑞筐，謝謝！
英文原文：CSS Flexbox Learning Guides, Tools & Frameworks
作者：Eric Karkovack
譯者：IT程序獅
譯文地址：http://www.reibang.com/p/bfd11e45efa9
