[譯] 趣味學習 CSS 佈局 —— 第一部分：彈性佈局

• 原文地址：Fun places to learn CSS Layout –  Part 1: Flexbox
• 原文做者：Stéphanie
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：MarchYuanx
• 校對者：sleepingxixi, Stevens1995

趣味學習 CSS 佈局 —— 第一部分：彈性佈局

這個內容已是 2 年前的了。請記住，如下內容可能已過期。

在我開始學習 CSS 時，一切都是關於用浮動、絕對定位與相對定位實現你想要作的事。今天，咱們有了很棒的新工具來建立佈局：彈性佈局和網格佈局。若是你忽略 IE9 以及更早的版本，則 Flexbox 幾乎在任何地方都受到很好的支持，可用於建立靈活且可擴展的佈局。目前，網格佈局並不是在任何地方都受到支持，可是若是您正在尋找一種構建複雜而通用的響應式網格的方法，那仍是頗有但願的。

掌握這兩個模塊可能有些棘手。幸運的是，一些很棒的人制做了許多有趣的工具來幫助你學習並掌握這些它們，因此當它們被各處支持時你也準備好了。

這是幫助您學習 CSS 佈局的可能性系列的第一篇文章，今天咱們將專一於學習彈性佈局。
若是你要查找本文的法文版本，能夠查看 「Apprendre le positionnement en s’amusant – Partie 1 : Flexbox「

學習彈性佈局的小遊戲

Flexbox Froggy 小遊戲

Flexbox Froggy 是一款有趣的小遊戲。您須要使用不一樣的彈性佈局屬性將可愛的小青蛙帶到睡蓮。(Thomas H. Park 製做)

Flexbox defense 小遊戲

Flexbox defense 是一款小遊戲，您將在其中使用彈性佈局阻止傳入的敵人越過防線。(Channing Allen 製做)

彈性佈局可視化實驗面板

有時最好的學習方法是本身作實驗。這裏有一些可視的彈性佈局實驗面板，您能夠在這裏探索和解構東西，以更好地理解語法。

CSS3 彈性佈局的視覺指南

添加、移除和定位子元素，並測試您在佈局中全部要用到的彈性佈局屬性。(Dimitar Stojanov 製做)

彈性佈局實驗面板

在這個由 Gabi 製做的 codepen 實驗面板上，你將可以測試不一樣的彈性佈局屬性，並使用它們的值來觀察結果。

Flexplorer

在另外一個由 Bennett Feely 製做的小型可視化實驗面板中，您能夠進行測試並使用不一樣的屬性來探索彈性佈局 CSS 模塊的可能性。

彈性佈局能夠幫助您實現什麼

彈性佈局的解決方案

在彈性佈局以前，垂直居中曾是一個噩夢，這個站點將向您展現一些如今使用彈性佈局能夠輕鬆解決的技巧。(Phil Walton 製做)

彈性佈局模式

彈性佈局用來構建佈局很好，可是像標籤或卡片這樣更復雜的模式呢？彈性佈局模式能夠知足您的需求。(CJ Cenizal 製做)

彈性佈局備忘單

彈性佈局的語法並不老是那麼容易，這裏有一些備忘單能夠幫助您記住不一樣的屬性和值。

彈性佈局的 CSS 技巧指南

Joni Bologna 的豐富的彈性佈局備忘單

Yoksel 的彈性佈局備忘單

須要更多的幫助？

Wes Boss 製做了 20 個免費視頻幫助您學習彈性佈局，而且您也能夠查看這篇文章用一些 gif 動畫解釋彈性佈局。
這是針對彈性佈局的，稍後請參見第二部分網格佈局。

您是否正在爲網站或移動應用程序尋找 UX 或 UI 設計師？若是您想邀請我參加您的會議，或只是想了解更多關於個人信息？您能夠查看個人做品、與我聯繫。

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。