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

布局的(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)了(↓₹₽le)所有(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) JailBreak 為(wèi)本文(wén)的(de)所有(yǒu)示例制(zhì)作(zuò)了(↑§' le) Demo，也(yě)可(kě)以參考。

以下(xià)內(nèi)容主要(yào)參考了(le)下 ♠ε‌(xià)面兩篇文(wén)章(zhāng)：A Complete Guide to Flexbox 和(hé) A Visual Guide to CSS3 Flexbox Prope£φΩ rties。

一(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) Flex 布局。

 .box{   display: inline-flex; } 

Webkit 內(nèi)核的(de)浏覽器(qì)，必須加上(s>¥hà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ì$↑)"。它的(de)所有(yǒu)子(zǐ)元素自(zì)動成為(wè✘™i)容器(qì)成員(yuán)，稱為(wèi) Flex 項目（δ​flex item），簡稱"項目"。

容器(qì)默認存在兩根軸：水(shuǐ)平的(de)主軸σγ（main axis）和(hé)垂直的(de)交叉軸（c₹λross axis）。主軸的(de)開(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 | column-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)稱"軸線&"★♦≈quot;）上(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àng) ₹γ方。

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

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 | basel$±ine | 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)au¶ εto，将占滿整個(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 |©&∞¥ space-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àng)等。所以，軸線§α¶之間(jiān)的(de)間(jiān)隔比軸線與邊框£₩≈'的(de)間(jiān)隔大(dà)一(yī)倍。
• stretch（默認值）：軸線占滿整個(gè)交叉軸。

四、項目的(de)屬性

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

• 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ù)足，該項目将縮小(xiǎ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)間(jiā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í)的(d✔✔★e)屬性，因為(wèi)浏覽器(qì)會(huì)推算  ≠(suàn)相(xiàng)關值。

4.6 align-self屬性

align-self屬性允許單個(gè)項目有(yǒu)與其他(tā)項目不(bù)一(yī)樣的(d™∑€e)對(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ī)緻。