Flexbox 設計指南

Flexbox 是一個強大的新生 CSS 布局模塊，完全脫離於傳統的 web 開發實踐。網上有很多相關的文章，大都關注於規範的細節，導致文章冗長，難懂，甚至有些晦澀。相反，對於設計師和開發者如何使用 flexbox 解決布局問題的討論相當少：至此，這篇文章出現了。

從基礎層面上來講，flexbox 有三個特性是設計之根本。但也是在很長一段時間內單純使用 CSS 很難或者不可能完成任務：對齊方式，排布和順序。

開始之前，需要先了解下面幾個事情：

• Flexbox 在最終形成今天的規範之前，歷經了三次迭代。每一次迭代都伴隨著不同的屬性名，在不同瀏覽器下有著相應的特定前綴。而現在，我們所處在這樣的時刻，所有的瀏覽器都支持無前綴的終極規範，但是想要兼容低版本的瀏覽器還有很多坑要填。正因如此，我強烈建議你按照 flexbox 的最終規範編寫代碼，並且使用最新的瀏覽器進行測試，然後再去實現向前兼容。想要讓你編寫的代碼同時兼容所有的瀏覽器是一件很頭疼的事。

• 儘管 flexbox 可以和其它的 CSS 布局系統一同工作，但是在開始使用新的系統之前，丟掉以前在 web 布局中的假設和實踐很重要。這是一種全新的工作方式，如果堅持以前的思維，你將受到阻礙。

• 你可能偶爾聽到「flexbox 是用來幹啥幹啥的」。誠然，其它的布局系統會很快的補充上 flexbox——比如 grids 和 regions，但這種稱述並不完全準確。CSS 不是語義化的，沒有哪一個 CSS 特性就是固定做某件事情的。你可以使用任意的 CSS 來完成你的需求；唯一的問題是什麼樣的代碼才能更高效的實現目標。正如我們看到的，flexbox 解決了設計者在布局上正面臨的諸多問題。

• Flexbox 以前的幾個版本給現在的開發者們帶來了一些風險：很可能讀到一篇沒有指明書寫時間的文章，最後發現自己正在看 2009 年的 flexbox 規範說明（現在已經廢除）。所以，時刻謹慎小心，提高警惕。

一個簡單的 Flexbox 應用實例

將三個簡單的 <div> 元素放在另一個容器內部：

<div id="item-container"> <div class="circle"></div> <div class="square"></div> <div class="circle"></div></div>

現在按照內層的 div 元素的類名添加 CSS 樣式，為外層容器添加 display: flex：

#item-container { display: flex; background-color: hsl(34,88%,90%);}.square { width: 200px; height: 200px; background-color: hsl(50,88%,50%);}.circle { border-radius: 50%; width: 150px; height: 150px; background-color: hsl(22,88%,50%);}

結果如下所示：

此時，有幾件事需要注意：

• 很多常見的 flex 相關的屬性都被應用於父元素，而不是單個的子元素。這通常會引起一個疑惑，絕大多數開發者習慣於控制單個的元素，而不是通過父元素為子元素添加樣式；

• Flex 容器的每個直接子元素被稱為一個「flex-item」。然而，子元素裡面的所有元素不會繼承任何特殊的樣式，並且可以添加任何你想要的 CSS。因為每個子元素是一個 flex-item，你會發現自己通過將元素包裹在一個 div 或者其它的元素中，「保護」裡面的內容。使該元素成為 flex-child，而不是它裡面的內容；
• 「Block」，「inline」，「float」 和 「text-align」 在 flex-item 的環境下無意義；
• 默認情況，所有的 flex-item 會按照 flex 容器的頂部和左側對齊。

Flex 對齊方式

第一步，我們要改變 flex-item 的水平對齊方式。flex-item 默認是左對齊，對應的 CSS 樣式為 flex-start。我們將它改為末端。

#item-container { justify-content: flex-end;}

到目前還沒什麼驚艷的，但是我們再看一下其它幾種可能性。

#item-container { justify-content: center;}

#item-container { justify-content: space-between;}

繼續討論。 space-between 最大化分布了容器內部的元素。不管是兩個 flex-item 還是十幾個，這都是成立的。

再來一個：

#item-container { justify-content: space-around;}

它很容易讓人聯想到「已經被用爛了的margin: 0」。Flex-item 默認會被均勻的分布，但是每一個都會在其給定的空間內居中顯示。

你可能已經注意到，目前為止所有的變化都被限定在水平方向上。垂直呢？

#item-container { justify-content: space-between; align-items: center;}

Flex-item 會沿著 flexbox 模型指向的「十字坐標」移動。中間的正方形，沒有可移動的垂直空間，在原位置保持不變。事實上，會以它們的中心來對齊所有元素，沿著 X 軸。屬性值還可能是其它的：flex-start（默認，等同於「align top」），flex-end（「align bottom」）以及 stretch。

我還想說，flexbox 也是「首個允許你控制元素順序的 CSS 布局系統。」為此做一個簡單的嘗試：將正方形放在兩個圓形的前面，而不是兩者之間：

.square { order: -1; }

真的很炫酷。Flexbox 有效地擺脫了代碼順序對文檔內容顯示的束縛：按照慣例，HTML 文檔中最先出現的元素往往也最先渲染在頁面中。傳統的 CSS 對這種改變顯得很無力，這個領域也是一直被 JavaScript 所佔據著。需要明白，這麼做不會改變原始的 HTML 代碼順序：通過在瀏覽器上查看源代碼可以證明。

關於 flexbox 值得探討的有很多，以至於它勢不可擋。希望這篇文章是一個很好的開端；我會在接下來的文章中展示，使用 flexbox 實現那些曾被認為「不可能」的頁面設計。

Phillip Walton 在一個很棒的 GitHub 小站中同樣以設計的觀點透視了 flexbox。

原文：demosthenes.info

外刊君推薦：

CSS Flexible Box Layout Module Level 1

demosthenes.info

A Complete Guide to Flexbox

關注微博：前端外刊評論