[譯] Solved by Flexbox — 更乾淨,無奇技淫巧的 CSS
介紹
CSS 長期以來缺乏合適的佈局機制。 變形，動畫，濾鏡，對這門語言來說都很有用，但是都沒有解決 Web 開發者長期抱怨的主要問題。
終於，多虧了 Flexbox 佈局 ，我們有了解決方案。
這個頁面並不是另一個 CSS 框架。主要目的是展示曾經很困難甚至無法單獨用 CSS 解決的問題，現在被 Flexbox 佈局輕鬆解決。隨著最近釋出的 Internet Explorer 11 和 Safari 6.1，最新的 Flexbox 語法已經被每一個的現代瀏覽器支援。
檢查下邊的 demo 。檢視瀏覽器的網頁審查工具或者深入 原始碼 檢視，一旦 Flexbox 成為主流，CSS 佈局程式碼將會變得多麼的簡單。
展示
-
更棒，更簡潔的柵格系統
Flexbox 滿足了我們大部分對於柵格系統的需求。尺寸、對齊僅用一兩個屬性就能搞定。
-
聖盃佈局
這是一個經典的 css-hack 佈局挑戰，歷史上出現的方案都沒有完美解決。直到 Flexbox 佈局的出現，終於成為可能。
-
輸入附加元件
建立全寬度，流式的輸入/按鈕組在 CSS 的歷史中幾乎不可能。有了 Flexbox 佈局，一切將會變得更簡單。
-
媒體物件
建立含有固定或變化的頭像的媒體物件，不用擔心溢位(overflow)，清除浮動(clearfixing)，或者塊格式化內容(block formatting context)等 hack 。
-
粘性頁尾
讓你的頁尾粘在底部一直以來是一個技巧。如果頁尾的高度未知，那麼基本上就不可能了。現在不再如此。
-
垂直居中
這個經典的問題一直被 CSS hackers 挑戰了很多年，歷史的解決方案沒有一個能夠完整地解決。有了 Flexbox 佈局，終於成為了可能。
瀏覽器支援
-
Chrome
-
Opera
-
Firefox
-
Safari
-
IE
-
Edge
注意事項和已知問題
- IE 10 支援 Flexbox 佈局，但是當前版本僅支援 Flexbox 的草案版本 : (
display:flexbox)。 - Safari 6 以及更早的版本支援 原始的 Flexbox 語法, 現在已經被淘汰: (
display:box)。 - Firefox 27 以及更早的版本不支援多行 flexbox 。檢視 bug 報告 獲得更多資訊。
- 對於所有瀏覽器的支援力度，可以檢視 caniuse.com/flexbox
關於程式碼
該頁面的所有關於 Flexbox 解決特定問題的示例。都沒有被設計用來解決瀏覽器的相容性。一些瀏覽器不完全支援 Flexbox 佈局的最新語法，所以，很遺憾，一些相容性工作是需要的。
相容性工作的程式碼沒有展示在示例中，但是如果你好奇實現的細節，你可以檢視原始碼。每一個 demo 都有指向其原始碼的連結，裡邊有完整的相容性程式碼，以及文件註釋，所以不用擔心，去看一看吧。
Flexbox 佈局自動化相容性工具由 autoprefixer 提供。如果你沒使用 autoprefixer 來寫 Flexbox 程式碼，那麼，你可能會犯一些可怕的錯誤。
在示例程式碼和原始檔中使用的類名來自於 SUIT CSS ，基於 BEM 方法。每個示例包含的可重用的 CSS 元件允許你複製修改適應你自己的專案。每個示例頁面提供了各自元件的連結。
如果你發現了錯誤或者想提供一些額外的示例，歡迎在 Github 上開一個 issue 或者提交一個 pull request。
關於該中文翻譯版本
該文件基於Solved by Flexbox 原始英文版本的 CC-BY 授權協議，由 阿卡琳 獨自翻譯。
歡迎任何關於翻譯或其建議。請在 Github 上給我傳送 pull request 或者 開一個 issue