本文由大漠根據(jù)Chris Coyier的《A Complete Guide to Flexbox》所譯，整個譯文帶有我們自己的理解與思想，如果譯得不好或不對之處還請同行朋友指點。如需轉載此譯文，需注明英文出處：http:///snippets/css/a-guide-to-flexbox，以及作者相關信息

——作者：Chris Coyier

——譯者：大漠

Flexbox布局（Flexible Box)模塊旨在提供一個更加有效的方式制定、調整和分布一個容器里的項目布局，即使他們的大小是未知或者是動態(tài)的。（這里我們稱為Flex）。

Flex布局主要思想是讓容器有能力讓其子項目能夠改變其寬度、高度(甚至順序)，以最佳方式填充可用空間（主要是為了適應所有類型的顯示設備和屏幕大?。?。Flex容器會使子項目（伸縮項目）擴展來填滿可用空間，或縮小他們以防止溢出容器。

最重要的是，F(xiàn)lexbox布局方向不可預知，他不像常規(guī)的布局（塊就是從上到下，內聯(lián)就從左到右）。而那些常規(guī)的適合頁面布局，但對于支持大型或者雜的應用程序（特別是當他涉及到取向改變、縮放、拉伸和收縮等）就缺乏靈活性。

注：Flexbox布局最適合應用程序的組件和小規(guī)模的布局，而網(wǎng)格布局更適合那些更大規(guī)模的布局。

基本要素

因為Flexbox是整個模塊，而不是一個屬性，它涉及很多東西，包括其整個組屬性。他們當中一部分是容器（父元素，稱為“伸縮容器”），另一部分是子元素（稱為“伸縮項目”）。

常規(guī)布局是基于塊和內聯(lián)流方向，而Flex布局是基于flex-flow流。請看看來自w3c規(guī)范中的這張圖，解釋了flex布局的主要思想。

根據(jù)伸縮項目排列方式不同，主軸和側軸方向也有所變化

——大漠

基本上，伸縮項目是沿著主軸（main axis），從主軸起點（main-start）到主軸終點（main-end）或者沿著側軸（cross axis），從側軸起點（cross-start）到側軸終點（cross-end）排列。

• 主軸（main axis）：伸縮容器的主軸，伸縮項目主要沿著這條軸進行排列布局。小心，它不一定是水平的；這主要取決于“justify-content”屬性（詳細見下文）。
• 主軸起點（main-start）和主軸終點（main-end）：伸縮項目放置在伸縮容器內從主軸起點（main-start）向主軸終點（main-start）方向。
• 主軸尺寸（main size）：伸縮項目在主軸方向的寬度或高度就是主軸的尺寸。伸縮項目主要的大小屬性要么是寬度，要么是高度屬性，由哪一個對著主軸方向決定。
• 側軸（cross axis）：垂直于主軸稱為側軸。它的方向主要取決于主軸方向。
• 側軸起點（cross-start）和側軸終點（cross-end）：伸縮行的配置從容器的側軸起點邊開始，往側軸終點邊結束。
• 側軸尺寸（cross size）：伸縮項目的在側軸方向的寬度或高度就是項目的側軸長度，伸縮項目的側軸長度屬性是「width」或「height」屬性，由哪一個對著側軸方向決定。

屬性

display:flex | inline-flex;(適用于伸縮容器，也就是伸縮項目的父元素)

這個是用來定義伸縮容器，是內聯(lián)還是塊取決于設置的值。這個時候，他的所有子元素將變成flex文檔流，稱為伸縮項目。

請注意：

• CSS的columns在伸縮容器上沒有效果。
• float、clear和vertical-align在伸縮項目上沒有效果。

flex-direction（適用于伸縮容器，也就是伸縮項目的父元素）

這個主要用來創(chuàng)建主軸，從而定義了伸縮項目放置在伸縮容器的方向。

• row(默認值)：在“l(fā)tr”排版方式下從左向右排列；在“rtl”排版方式下從右向左排列。
• row-reverse：與row排列方向相反，在“l(fā)tr”排版方式下從右向左排列；在“rtl”排版方式下從左向右排列。
• column：類似 于row，不過是從上到下排列
• column-reverse：類似于row-reverse，不過是從下到上排列。

主軸起點與主軸終點方向分別等同于當前書寫模式的始與結方向。其中“l(fā)tr”所指文本書寫方式是“l(fā)eft-to-right”也就是從左向右書寫；而“rtl”所指的剛好與“l(fā)tr”方式相反，其書寫方式是“right-to-left”，也就是從右向左書寫。

——大漠

flex-wrap(適用于伸縮容器，也就是伸縮項目的父元素)

這個主要用來定義伸縮容器里是單行還是多行顯示，側軸的方向決定了新行堆放的方向。

• nowrap(默認值)：伸縮容器單行顯示，“l(fā)tr”排版下，伸縮項目從左到右排列；“rtl”排版上伸縮項目從右向左排列。
• wrap：伸縮容器多行顯示，“l(fā)tr”排版下，伸縮項目從左到右排列；“rtl”排版上伸縮項目從右向左排列。
• wrap-reverse：伸縮容器多行顯示，“l(fā)tr”排版下，伸縮項目從右向左排列；“rtl”排版下，伸縮項目從左到右排列。（和wrap相反）

flex-flow（適用于伸縮容器，也就是伸縮項目的父元素）

這個是“flex-direction”和“flex-wrap”屬性的縮寫版本。同時定義了伸縮容器的主軸和側軸。其默認值為“row nowrap”。

justify-content（適用于伸縮容器，也就是伸縮項目的父元素）

這個是用來定義伸縮項目沿著主軸線的對齊方式。當一行上的所有伸縮項目都不能伸縮或可伸縮但是已經(jīng)達到其最大長度時，這一屬性才會對多余的空間進行分配。當項目溢出某一行時，這一屬性也會在項目的對齊上施加一些控制。

• flex-start(默認值)：伸縮項目向一行的起始位置靠齊。
• flex-end：伸縮項目向一行的結束位置靠齊。
• center：伸縮項目向一行的中間位置靠齊。
• space-between：伸縮項目會平均地分布在行里。第一個伸縮項目一行中的最開始位置，最后一個伸縮項目在一行中最終點位置。
• space-around：伸縮項目會平均地分布在行里，兩端保留一半的空間。

align-item（適用于伸縮容器，也就是伸縮項目的父元素）

這個主要用來定義伸縮項目可以在伸縮容器的當前行的側軸上對齊方式?？梢园阉胂癯蓚容S（垂直于主軸）的“justify-content”。

• flex-start：伸縮項目在側軸起點邊的外邊距緊靠住該行在側軸起始的邊。
• flex-end：伸縮項目在側軸終點邊的外邊距靠住該行在側軸終點的邊 。
• center：伸縮項目的外邊距盒在該行的側軸上居中放置。
• baseline：伸縮項目根據(jù)他們的基線對齊。
• stretch（默認值）：伸縮項目拉伸填充整個伸縮容器。此值會使項目的外邊距盒的尺寸在遵照「min/max-width/height」屬性的限制下盡可能接近所在行的尺寸。

align-content(適用于伸縮容器，也就是伸縮項目的父元素)

這個屬性主要用來調準伸縮行在伸縮容器里的對齊方式。類似于伸縮項目在主軸上使用“justify-content”一樣。

注：請注意本屬性在只有一行的伸縮容器上沒有效果。

• flex-start：各行向伸縮容器的起點位置堆疊。
• flex-end：各行向伸縮容器的結束位置堆疊。
• center：各行向伸縮容器的中間位置堆疊。
• space-between：各行在伸縮容器中平均分布。
• space-around：各行在伸縮容器中平均分布，在兩邊各有一半的空間。
• stretch（默認值）：各行將會伸展以占用剩余的空間。

order（適用于伸縮項目，也就是伸縮容器的子元素）

默認情況下，伸縮項目是按照文檔流出現(xiàn)先后順序排列。然而，“order”屬性可以控制伸縮項目在他們的伸縮容器出現(xiàn)的順序。

flex-grow（適用于伸縮項目，也就是伸縮容器的子元素）

根據(jù)需要用來定義伸縮項目的擴展能力。它接受一個不帶單位的值做為一個比例。主要用來決定伸縮容器剩余空間按比例應擴展多少空間。

如果所有伸縮項目的“flex-grow”設置了“1”，那么每個伸縮項目將設置為一個大小相等的剩余空間。如果你給其中一個伸縮項目設置了“flex-grow”值為“2”，那么這個伸縮項目所占的剩余空間是其他伸縮項目所占剩余空間的兩倍。

負值同樣生效。

flex-shrink（適用于伸縮項目，也就是伸縮容器的子元素）

根據(jù)需要用來定義伸縮項目收縮的能力。

負值同樣生效。

flex-basis(適用于伸縮項目，也就是伸縮容器的子元素)

這個用來設置伸縮基準值，剩余的空間按比率進行伸縮。

負值不合法。

flex（適用于伸縮項目，也就是伸縮容器的子元素）

這是“flex-grow”、“flex-shrink”和“flex-basis”三個屬性的縮寫。其中第二個和第三個參數(shù)（flex-shrink、flex-basis）是可選參數(shù)。默認值為“0 1 auto”。

align-self（適用于伸縮項目，也就是伸縮容器的子元素）

用來在單獨的伸縮項目上覆寫默認的對齊方式。

屬性值的介紹請參閱“align-items”的屬性值。

實例

讓我們先從一個非常簡單的例子開始，解決一個幾乎每天都會碰到的問題：完美的居中。如果你使用flexbox，沒有比這更簡單的方法。

這個依賴于設置“margin”值為“auto”值，自動獲取伸縮容器中剩余的空間。所以設置垂直方向margin值為“auto”，可以使伸縮項目在伸縮容器的兩上軸方向都完全集中。

現(xiàn)在我們來使用一些其他的屬性。

考慮使用6個列表項，并且為了視覺審美給他設置了一個固定大小尺寸，但他們也有可能可以自動獲取尺寸大小。我們希望他們能均勻的、很好的分布在水平軸上，就算當我們調整瀏覽器，他們也依然顯示得很好（不使用媒體查詢）。

完成。其他的一切都不過是一些美化外觀樣式。下面是在codepen上展示的一個例子。到codepen上查看，并試著調整你瀏覽器窗口去看發(fā)生什么事？

讓我們試試別的。假設我們網(wǎng)站頂部有一個右對齊的導航，但是我們希望它在小屏幕和小型設備中能單列居中顯示。非常簡單。

讓我們嘗試一些更靈活性的伸縮項目！關于移動先行，3列布局與頁眉頁腳全屏。和獨立的文檔順序。