深刻了解 Flexbox 伸縮盒模型

做者長期以來使用表格、浮動、行內塊元素和其餘 CSS 屬性來佈局網站內容。然而，這些並非爲複雜的頁面和網頁應用而設計的。不論是簡單的垂直居中，仍是靈活的網格佈局都很難靠一己之力輕易實現，所以成就了 CSS 網格框架。可是，若是真的須要那麼多項目來實現作這些事，爲何不讓它來的更簡單些呢？Flexbox 的目的就是改變這一切。

規範狀態和瀏覽器支持狀況

Flexbox 規範的相關工做已經進展了3年。不一樣的瀏覽器也實現了不一樣的實驗版本。在2012年9月，Flexbox 語法的第三個主要修訂版本進入到候選推薦階段。這意味着 W3C 認爲當前的語法是穩定的，並鼓勵瀏覽器開發商去實現它。

Flexbox 規範時間表：

• 2009年7月 工做草案 (display: box;)
• 2011年3月 工做草案 (display: flexbox;)
• 2011年11月 工做草案 (display: flexbox;)
• 2012年3月 工做草案 (display: flexbox;)
• 2012年6月 工做草案 (display: flex;)
• 2012年9月 候選推薦 (display: flex;)

Flexbox 已經被瀏覽器快速支持。Chrome 22+, Opera 12.1+, 和 Opera Mobile 12.1+ 已經支持了本文中所描述的 Flexbox。Firefox 18 和 Blackberry 10 也很快就會實現。我推薦你們使用已經支持的瀏覽器來閱讀本文和查看例子。

概念和術語

雖然如今咱們可使用 Flexbox 輕鬆建立佈局，而不會像之前那樣難以理解，但咱們仍然須要花一些時間去熟悉到底如何使用 Flexbox。新的術語和概念可能會是咱們使用 Flexbox 時的一個障礙，因此讓咱們先來了解如下它們。

Flexbox 由 伸縮容器 和 伸縮項目 組成。經過設置元素的 display 屬性爲 flex 或 inline-flex 能夠獲得一個伸縮容器。設置爲 flex 的容器被渲染爲一個塊級元素，而設置爲 inline-flex 的容器則渲染爲一個行內元素。

這裏的示例建立了一個伸縮容器。

 

1 2 3 4

.flex-container { display: -webkit-flex; display: flex; }

view raw gistfile1.css This Gist brought to you by  GitHub.

 

本文中全部的示例都會帶有相應的瀏覽器廠商前綴。

伸縮容器中的每個子元素都是一個伸縮項目。伸縮項目能夠是任意數量的。伸縮容器外和伸縮項目內的一切元素都不受影響。簡單地說，Flexbox 定義了伸縮容器內伸縮項目該如何佈局。

Flex Lines 伸縮行

伸縮項目沿着伸縮容器內的一個 伸縮行 定位。一般每一個伸縮容器只有一個伸縮行。

這個示例展現了2個項目在默認狀況下的定位：沿着一個水平伸縮行從左至右顯示。

Writing Modes 書寫模式

在你設計 Flexbox 時的有一個重要的部分是更改伸縮行的方向。默認狀況下，伸縮行和文本方向一致：從左至右，從上往下。

這是 W3C 關於一個名爲書寫模式的新特性工做草稿。書寫模式是一個新的方法，讓你能夠從右往左寫，甚至豎着寫，就像你知道的某些語言同樣。

書寫模式是一個正在進行的計劃，可是 Chrome 已經率先支持了 direction CSS 屬性。若是咱們在上一個例子中設置方向爲 rtl (從右往左) 那麼不只僅文字會從右往左書寫，並且 伸縮行也改變了方向，並更改了頁面的佈局。

這也許就是 Flexbox 爲何如此抽象難懂的地方。當你正在製做一個語言不肯定的頁面時你不能簡單的只是說「上」、「下」、「左」、「右」。

The Main Axis and the Cross Axis 主軸和側軸

爲了描述抽象的書寫模式，Flexbox 使用 主軸 和 側軸的概念。伸縮行跟隨主軸。側軸則垂直於主軸。

起點、終點和各軸的方向的名稱以下：

• 主軸起點 Main Start
• 主軸終點 Main End
• 主軸方向 Main Direction (有時候也成爲伸縮流方向 Flow Direction)
• 側軸起點 Cross Start
• 側軸終點 Cross End
• 側軸方向 Cross Direction

在繼續瞭解以前明白主軸和側軸是相當重要的。Flexbox 中的一切都和這些軸有關。在咱們全部的例子中，書寫模式都是從左至右，從上到下，可是你須要記住並非全部的 Flexbox 都是這樣的。

伸縮容器的屬性

flex-direction 伸縮流的方向

flex-direction 容許你更改伸縮容器的主軸方向。flex-direction 的默認值是 row。該值表示伸縮項目根據書寫模式的方向佈局。再次提醒，默認是從左至右，從上到下。其餘的值以下：

• row-reverse: 主軸起點和主軸終點交換。若是書寫模式是從左至右，伸縮項目則是從右往左顯示。
• column: 主軸和側軸交換。若是書寫系統是垂直的，那麼伸縮項目也是垂直顯示的。
• column-reverse: 和 column 同樣，可是方向相反。

讓咱們把前一個示例中的 flex-direction 改成 column。

如今咱們的伸縮項目就是垂直顯示的了。

justify-content 主軸對齊

伸縮容器的 justify-content 屬性用於調整主軸上伸縮項目的位置。可能的值爲：

• flex-start (默認)
• flex-end
• center
• space-between
• space-around

這裏咱們設置 justify-content 爲 center 讓伸縮項目在主軸上居中對齊：

flex-start, flex-end, 和 center 一看就懂。space-between 和 space-around 則是分配伸縮項目之間空白空間的不一樣方法。這張規範中的圖示很好的解釋了一切：

align-items 側軸對齊

align-items 是一個和 justify-content 相呼應的屬性。align-items 調整伸縮項目在側軸上的定位方式。可能的值有：

• flex-start (默認)
• flex-end
• center
• baseline
• stretch

這裏咱們設置 align-items 爲 center 讓伸縮項目在側軸上居中對齊：

和以前同樣，flex-start, flex-end, 和 center 的意義顯而易見。stretch 也很簡單：它會將伸縮項目從側軸起點拉伸到側軸終點。baseline 則是讓伸縮項目與它們的基線對齊。基線根據伸縮項目的內容計算獲得。下面這張來自W3C標準的圖例很好的解釋了這些屬性：

flex-wrap 伸縮行換行

目前爲止，每一個伸縮容器都有且只有一個伸縮行。使用 flex-wrap 你能夠爲伸縮容器建立多個伸縮行。這個屬性接受如下值：

• nowrap (默認)
• wrap
• wrap-reverse

若是 flex-wrap 設置爲 wrap，在一個伸縮行容不下全部伸縮項目時，伸縮項目會換行到一條新增的伸縮行上。新增的伸縮行根據側軸的方向添加。

咱們使用 flex-wrap 來看個例子：

wrap-reverse 和 wrap 同樣，只是新的伸縮行會被添加到側軸的反方向上。

align-content 堆棧伸縮行

align-content 會更改 flex-wrap 的行爲。它和 align-items 類似，可是不是對齊伸縮項目，它對齊的是伸縮行。可能你已經想到了，它接受的值也很類似：

• stretch (默認)
• flex-start
• flex-end
• center
• space-between
• space-around

這些值與 justify-content 和 align-items 中的值同樣。

在這個例子中，咱們設置 align-content 爲 center：

flex-flow 伸縮方向與換行

flex-flow 是 flex-direction 和 flex-wrap 的縮寫。

flex-flow: [flex-direction] [flex-wrap]

舉個例子：

 

1 2 3 4

.flex-container { -webkit-flex-flow: column nowrap; flex-flow: column nowrap; }

view raw gistfile1.css This Gist brought to you by  GitHub.

 

伸縮項目的屬性

一個伸縮項目是一個伸縮容器的子元素。伸縮容器中的文本也被視爲一個伸縮項目。

伸縮項目中內容與普通流同樣。舉例來講，當一個伸縮項目被設置爲浮動，你依然能夠在這個伸縮項目中放置一個浮動元素。

伸縮項目都有一個 主軸長度(Main Size) 和一個 側軸長度(Cross Size)。主軸長度是伸縮項目在主軸上的尺寸。側軸長度是伸縮項目在側軸上的尺寸。或者說，一個伸縮項目的寬或高取決於伸縮容器的軸，可能就是它的主軸長度或側軸長度。

下面的屬性能夠調整伸縮項目的行爲：

order 顯示順序

order 是最簡單明瞭的屬性。設置伸縮項目的 order 能夠調整它們渲染時的順序。在這個例子中，咱們設置其中一個伸縮項目的 order 爲 -1，因而它被提早到了其餘伸縮項目的最前面。

若是須要文檔順序和顯示順序不一樣時，這就是個頗有用的功能了。

margin 外邊距

你應該對 margin: auto; 的這種用法很熟悉。在伸縮盒中，它也能作一樣的事情，可是更增強大。一個 "auto" 的 margin 會合並剩餘的空間。它能夠用來把伸縮項目擠到其餘位置。

這裏咱們在第一個伸縮項目上聲明瞭 margin-right: auto;，致使了全部的剩餘空間被合併到那個元素的右邊去了：

這裏咱們使用 margin: auto; 來重現經典CSS佈局中的聖盃：真·垂直居中：

align-self 側軸對齊

伸縮項目的 align-self 屬性會覆蓋該項目的伸縮容器的 align-items 屬性。它的值和 align-items 同樣：

• stretch (默認)
• flex-start
• flex-end
• center
• baseline

在這個例子中咱們爲每一個伸縮項目應用了不一樣的 align-self 值：

我在例子中包含了2個基線對齊的伸縮項目，由於它們的對齊須要互相做用。

flex 伸縮性

如今咱們終於要開始設置伸縮盒的伸縮性了。flex 指定了一個伸縮項目該如何分配主軸上的剩餘空間。

讓咱們一次把全部的常見值都看一遍吧。

flex: [number]

這個語法指定了一個數字，表明了這個伸縮項目該佔用的剩餘空間比例。

在這個例子中，第一個伸縮項目佔用了 2/4 的剩餘空間，而另外兩個各佔用了 1/4 的剩餘空間。

若是把每一個伸縮項目都設置爲 1 的話，那麼剩餘空間就會被平均分配了。

flex: initial

一個 flex 屬性值被設爲 initial 的伸縮項目，在有剩餘空間的狀況下不會有任何變化，可是在必要的狀況下會被收縮。

flex: auto

一個 flex 屬性值被設爲 auto 的伸縮項目，會根據主軸自動伸縮以佔用全部剩餘空間。

auto 目前僅在 Opera 12.11 尚有效，在 Chrome 23.0.1271.95 上無效。你能夠經過使用 flex: 1; 來達到同樣的效果。

flex: none

一個 flex 屬性值被設爲 none 的伸縮項目，在任何狀況都不會發生伸縮。

flex 縮寫

flex 也能夠把 flex-grow, flex-shrink, 和 flex-basis 這3個縮寫爲1個聲明：

flex: [flex-grow] [flex-shrink] [flex-basis]

大多數狀況下不必使用這種語法。另外，它須要一個更容易理解的伸縮算法。若是你以爲本身挺厲害的，到規範裏看一下吧。

固然你也能夠將 flex-grow, flex-shrink, 和 flex-basis 做爲單個屬性分開來設置。但我強烈反對這種方式：當使用 flex 縮寫時，即便沒有某些值沒有設置也能得到更合理的默認值。

visibility 疊加項目

當該值生效時，應用 visibility: collapse; 和 visibility: hidden; 與 display: none; 的效果是不同的。若是是 collapse，該元素會影響伸縮容器的側軸長度，但不會被現實或佔用主軸的空間。若是你想動態添加或移除伸縮項目又不會影響伸縮容器的側軸長度，這將會很是有用。

目前爲止，visibility: collapse; 尚未被讓任何瀏覽器正確的實現。如今 visibility: collapse; 還和 visibility: hidden; 實現着同樣的效果。我但願能儘快獲得改觀。

你能夠在 這裏 看到 collapse 應該是如何工做的。

總結

如你所見，伸縮佈局盒(Flexbox) 是一個強大的新型佈局模式，將會給網站帶來革命性的佈局方法，但它也須要一種全新的思考方式。但願這篇文章能爲你使用伸縮佈局盒構建網站帶來幫助。我不知道你怎麼想，可是在我看來將來是美好的。

原文：Dive into Flexbox (http://weblog.bocoup.com/dive-into-flexbox)
參考資料：Css3-flexbox (http://www.w3.org/html/ig/zh/wiki/Css3-flexbox)

轉自：[譯]深刻了解 Flexbox 伸縮盒模型：http://c7sky.com/dive-into-flexbox.html

本文轉自http://www.w3cplus.com/blog/666.html