網頁布局（layout）是(shì) CSS 的(de)一(yī)個(gè)重點應用(y ♦αòng)。

布局的(de)傳統解決方案，基于盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對(duì)于那(nà)些(xiē)特殊布局非常不(bù)方便，比如∞≤(rú)，垂直居中就(jiù)不(bù)容易實現(xiàn)。

2009年(nián)，W3C 提出了(le)一(yī♠≈↓Ω)種新的(de)方案----Flex 布局，可(kě)以簡便、完整、響應式地(d★ε♥≠ì)實現(xiàn)各種頁面布局。目前，它已經得(de)到(dào)了(lε  e)所有(yǒu)浏覽器(qì)的(de)支持，這(zhè)意味著(zhe)，現(☆"α∑xiàn)在就(jiù)能(néng)很(hěn)安全地(dì)使用(yòng)這(zh∑≥&'è)項功能(néng)。

Flex 布局将成為(wèi)未來(lái)布局的(de)首選方案。本文(wén)介≠£β紹它的(de)語法，下(xià)一(yī)篇文(wén)章(zhāng)給出常見(jiàn)布局的(de) Flex 寫法。網友(yǒu)&nbs‍σp;JailBreak 為(wèi)本文(wén)的(de)所有(yǒu)示例制(zhì)作(zuò)≥←>了(le) Demo，也(yě)可(kě)以參考。

以下(xià)內(nèi)容主要(yào)參考了(le)下(xià)面兩篇文(wén)章(zΩ‌£hāng)：A Complete Guide to Flexbox 和(hé) A Visual Guide to CSS3 Flexb∏αox Properties。

一(yī)、Flex 布局是(shì)什(shén)麽？

Flex 是(shì) Flexible Box 的↑♦(de)縮寫，意為(wèi)"彈性布局"，用(yòng)來(lái)為(w←±®πèi)盒狀模型提供最大(dà)的(de)靈活性。

任何一(yī)個(gè)容器(qì)都(dōu)可(kě)以指定為(wèi) Flex  ♣≈布局。

 .box{   display: flex; } 

行(xíng)內(nèi)元素也(yě)可(kě)以使用(yòng) Fleβ♥x 布局。

 .box{   display: inline-flex; } 

Webkit 內(nèi)核的(de)浏覽器(qì)，必須加上(shà ↔ 'ng)-webkit前綴。

 .box{   display: -webkit-flex; /* Safari */   display: flex; } 

注意，設為(wèi) Flex 布局以後，子(zǐ)元素的(de)δ♦↑float、clear和(hé)vertical-align屬性将失效。

二、基本概念

采用(yòng) Flex 布局的(de)元素，稱為(wèi) Flex ÷ε容器(qì)（flex container），簡稱&q<Ω∑uot;容器(qì)"。它的(de)所有(yǒu)子¥§(zǐ)元素自(zì)動成為(wèi)容器(qì)成員(yuán)，稱為(wèi) Flex✘φ 項目（flex item），簡稱"項目"。

容器(qì)默認存在兩根軸：水(shuǐ)平的(de)主軸（main ax™₽®$is）和(hé)垂直的(de)交叉軸（cross axis）。主軸的(d←←★​e)開(kāi)始位置（與邊框的(de)交叉點）叫做(zuò)main start，結束位置叫做(zuò)main end；交叉軸的(de)開(kāi)始位置叫做(zuò)cross start，結束位置叫做(zuò)cross end。

項目默認沿主軸排列。單個(gè)項目占據的(de)主軸空(kōng)間(jiān)≥≈叫做(zuò)main size，占據的(de)交叉軸空(kōng)間(jiān)叫做(zuò)cross size。

三、容器(qì)的(de)屬性

以下(xià)6個(gè)屬性設置在容器(qì)上(shàng)。

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

3.1 flex-direction屬性

flex-direction屬性決定主軸的(de)方向（即項目的(de)排列方向）。

 .box {   flex-direction: row | row-reverse | column | colu≤λ  mn-reverse; } 

它可(kě)能(néng)有(yǒu)4個(gè)值。

• row（默認值）：主軸為(wèi)水(shuǐ)平方向，起點在左端。
• row-reverse：主軸為(wèi)水(shuǐ)平方向，起點在右端。
• column：主軸為(wèi)垂直方向，起點在上(shàng)沿。
• column-reverse：主軸為(wèi)垂直方向，起點在下(xià)沿。

3.2 flex-wrap屬性

默認情況下(xià)，項目都(dōu)排在一(yī)條線（又(Ω€♥¶yòu)稱"軸線"）上(shàng)。flex-wrap屬性定義，如(rú)果一(yī)條軸線排不(bù)下(xià)，如(rú)何換行(xí↑↓↔λng)。

 .box{   flex-wrap: nowrap | wrap | wrap-reverse; } 

它可(kě)能(néng)取三個(gè)值。

（1）nowrap（默認）：不(bù)換行(xíng)。

（2）wrap：換行(xíng)，第一(yī)行(xíng)在上(shàn‌​∞•g)方。

（3）wrap-reverse：換行(xíng)，第一(yī)行(xíng)在下(xià)方。

3.3 flex-flow

flex-flow屬性是(shì)flex-direction屬性和(hé)flex-wrap屬性的(de)簡寫形式，默認值為(wèi)row nowrap。

 .box {   flex-flow: <flex-direction> || <flex-wrap>; } 

3.4 justify-content屬性

justify-content屬性定義了(le)項目在主軸上(shàng)的(de)對(duì)₩₩σ齊方式。

 .box {   justify-content: flex-start | flex-end | center | space-σ₽&γbetween | space-around; } 

它可(kě)能(néng)取5個(gè)值，具體(tǐ)對(du≈♣♣×ì)齊方式與軸的(de)方向有(yǒu)關。下(xià)面σ¥♠假設主軸為(wèi)從(cóng)左到(dào)右。

• flex-start（默認值）：左對(duì)齊
• flex-end：右對(duì)齊
• center： 居中
• space-between：兩端對(duì)齊，項目之間(jiān)的(de)間(jiān)隔都(dōu)相(xià✔δα ng)等。
• space-around：每個(gè)項目兩側的(de)間(jiān)隔相(xiàng)等。所以，項目之間(jiān)的(±÷‍de)間(jiān)隔比項目與邊框的(de)間(jiān)隔大(dà)一(yī)倍。

3.5 align-items屬性

align-items屬性定義項目在交叉軸上(shàng)如(rú)何對(duì)齊。

 .box {   align-items: flex-start | flex-end | center | baseline ∞δ| stretch; } 

它可(kě)能(néng)取5個(gè)值。具體(tǐ)的(de)對(duì)齊¶ε方式與交叉軸的(de)方向有(yǒu)關，下(xià)面假設交叉÷Ω₩>軸從(cóng)上(shàng)到(dào)下(xià)。

• flex-start：交叉軸的(de)起點對(duì)齊。
• flex-end：交叉軸的(de)終點對(duì)齊。
• center：交叉軸的(de)中點對(duì)齊。
• baseline: 項目的(de)第一(yī)行(xíng)文(wén)字的(de)基線對(duì)δ'Ω±齊。
• stretch（默認值）：如(rú)果項目未設置高(gāo)度或設為(wèi)aπ€uto，将占滿整個(gè)容器(qì)的(de)高(gāo)度。

3.6 align-content屬性

align-content屬性定義了(le)多(duō)根軸線的(de)對(duì)齊方式。如(rú)果項目隻有(yǒu)★€↓一(yī)根軸線，該屬性不(bù)起作(zuò)用(yòng)≤±↔。

 .box {   align-content: flex-start | flex-end | center | spac¶✔e-between | space-around | stretch; } 

該屬性可(kě)能(néng)取6個(gè)值。

• flex-start：與交叉軸的(de)起點對(duì)齊。
• flex-end：與交叉軸的(de)終點對(duì)齊。
• center：與交叉軸的(de)中點對(duì)齊。
• space-between：與交叉軸兩端對(duì)齊，軸線之間(jiān)的(↑ de)間(jiān)隔平均分(fēn)布。
• space-around：每根軸線兩側的(de)間(jiān)隔都(dōu)相(xiànβ↓'g)等。所以，軸線之間(jiān)的(de)間(jiān)隔比軸線與邊₽&框的(de)間(jiān)隔大(dà)一(yī)倍。
• stretch（默認值）：軸線占滿整個(gè)交叉軸。

四、項目的(de)屬性

以下(xià)6個(gè)屬性設置在項目上(shàng)。

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

4.1 order屬性

order屬性定義項目的(de)排列順序。數(shù)值越小(xiǎo)，排列越靠前，默認&  ₹為(wèi)0。

 .item {   order: <integer>; } 

4.2 flex-grow屬性

flex-grow屬性定義項目的(de)放(fàng)大(dà)比例，默認為(wèi)0，即如(rú)果存在剩餘空(kōng)間(jiān)，也‌✔(yě)不(bù)放(fàng)大(dà)。

 .item {   flex-grow: <number>; /* default 0 */ } 

如(rú)果所有(yǒu)項目的(de)flex-grow屬性都(dōu)為(wèi)1，則它們将等分(fēn)Ω ♠剩餘空(kōng)間(jiān)（如(rú)果有(yǒu)的(de)話(huà)）。如(r"↓ú)果一(yī)個(gè)項目的(de)flex-grow屬性為(wèi)2，其他(tā)項目都(dōu)為(wèi)1，則前者占γ✘據的(de)剩餘空(kōng)間(jiān)将比其他(tā)項多(duō)γγ一(yī)倍。

4.3 flex-shrink屬性

flex-shrink屬性定義了(le)項目的(de)縮小(xiǎo)比例，默認為(wèi)1，即如(rú)果空(k∞&α✔ōng)間(jiān)不(bù)足，該項目将縮小(xΩ©↔∞iǎo)。

 .item {   flex-shrink: <number>; /* default 1 */ } 

如(rú)果所有(yǒu)項目的(de)flex-shrink屬性都(dōu)為(wèi)1，當空(kōng)間(jiān)>✔不(bù)足時(shí)，都(dōu)将等比例縮小(xiǎo)。≤<α 如(rú)果一(yī)個(gè)項目的(de)flex-shrink屬性為(wèi)0，其他(tā)項目都(dōu)為(wèi)1，則空(kōng)間®€"δ(jiān)不(bù)足時(shí)，前者不(bù)縮小(xiǎo)。

負值對(duì)該屬性無效。

4.4 flex-basis屬性

flex-basis屬性定義了(le)在分(fēn)配多(duō)餘空(kōng)間(j∞©iān)之前，項目占據的(de)主軸空(kōng)間(jiān)≥"∑（main size）。浏覽器(qì)根據這(zhè)個(gè)屬性，計(jì)算£δ∞φ(suàn)主軸是(shì)否有(yǒu)多(duō)餘¶∏↓空(kōng)間(jiān)。它的(de)默認值為(wèi)auto，即項目的(de)本來(lái)大(dà)小(xiǎo)。

 .item {   flex-basis: <length> | auto; /* default auto */ } 

它可(kě)以設為(wèi)跟width或height屬性一(yī)樣的(de)值（比如(rú)350px），則項目将占據×'固定空(kōng)間(jiān)。

4.5 flex屬性

flex屬性是(shì)flex-grow, flex-shrink 和(hé) flex-basis的(de)簡寫，默認值為(wèi)0 1 auto。後兩個(gè)屬性可(kě)選。

 .item {   flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } 

該屬性有(yǒu)兩個(gè)快(kuài)捷值：auto (1 1 auto) 和(hé) none (0 0 auto)。

建議(yì)優先使用(yòng)這(zhè)個(gè)屬性，÷γ而不(bù)是(shì)單獨寫三個(gè)分(fēn)離(lí)的(¥↑de)屬性，因為(wèi)浏覽器(qì)會(huì)推算(s₹≈uàn)相(xiàng)關值。

4.6 align-self屬性

align-self屬性允許單個(gè)項目有(yǒu)與其他(tā)項目不(bù)一(yī)樣的(∏←de)對(duì)齊方式，可(kě)覆蓋align-items屬性。默認值為(wèi)auto，表示繼承父元素的(de)align-items屬性，如(rú)果沒有(yǒu)父元素，則等同于stretch。

 .item {   align-self: auto | flex-start | flex-end♠≤γ | center | baseline | stretch; } 

該屬性可(kě)能(néng)取6個(gè)值，除了(le)autoα↑α，其他(tā)都(dōu)與align-items屬性完全一(yī)緻。