CSS Flexbox 學習指南、工具與架構

標籤：流程   基礎   boot   技能   eal   ide   hub   布局   lun   

Flexbox 是一種更有效布局方式，它能更好的分配容器空間，並控制項目的對齊。雖然，掌握它的理論有些複雜，但幸運的是，我們可以藉助開放的網路來學習並逐步掌握它。

在本文中，我們整合了一些最佳的 Flexbox 學習資源，它們可以協助你瞭解Flexbox 的方方面面。涉及什麼是 Flexbox，以及如何有效地使用它。

Flexbox 學習指南

CSS 之 Flexbox 參考（Sara Soueidan）

CSS 之 Flexbox 參考是學習 Flexbox 基礎知識的系列文章。在文章中，你可以學習 Flexbox 的各種屬性，並通過文中那些優秀的互動示範來更好的理解它們。

深入瞭解 Flexbox — 設計、工具和工作流程（Greg Smith）

在《深入瞭解 Flexbox》文章中，我們將詳細地瞭解 Flexbox 的簡史，以及其文法的技術細節等內容。

譯者註：中文翻譯 —— 【傳送門】

使用 CSS 彈性盒子（MDN）

一個完整的 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.

CSS Flexbox 學習指南、工具與架構