文章來(lái)源：

一、前言

Flexbox 是一個(gè) CSS3 的盒子模型 ( box model )，顧名思義它就是一個(gè)靈活的盒子 ( Flexible Box )，為什麼最近這個(gè)屬性才紅起來(lái)呢？最主要也是因?yàn)?CSS3 的規(guī)范終于普及 ( 或 IE 終于敗亡 )，加上行動(dòng)裝置的發(fā)展促成了響應(yīng)式布局興起，自適應(yīng)長(zhǎng)寬彈性相當(dāng)大的 Flexbox 就趁勢(shì)而起了。

第一步要來(lái)看 Flexbox 的盒子模型，根據(jù) W3C 文章所描述，flex 的盒子模型如下圖所呈現(xiàn)，與一般的盒子模型不同的地方，在于 Flexbox 的盒子模型具有水平的起點(diǎn)與終點(diǎn) ( main start、main end )，垂直的起點(diǎn)與終點(diǎn) ( cross start、cross end )，水平軸與垂直軸 ( main axis、cross axis )，然后元素具有水平尺寸與垂直尺寸 ( main size、cross size )，這些都是相當(dāng)重要的布局規(guī)畫。

再來(lái)我們先看看 Flexbox 有哪些屬性，也可參考MDN的使用 CSS 彈性盒子

• display

• flex-direction

• justify-content

• align-items

• align-self

• align-content

• flex-wrap

• order

• flex

二、屬性介紹

A、display

display 是我們熟知的 CSS 屬性，對(duì)于 Flexbox 來(lái)說(shuō)，多了有兩種方式可以設(shè)定，預(yù)設(shè)為「flex」，其布局方式與 block 幾乎類似，都會(huì)強(qiáng)迫換行，但設(shè)定display:flex的子元素卻具備了更多彈性的設(shè)定。

此外另外一種方式則是「inline-flex」，和 inline-block 也是幾乎雷同，意義上都是一個(gè)display:flex的元素外面包覆display:inline的屬性，在后方的元素不會(huì)換行。

這樣做將元素定義為彈性容器，其子元素則成為彈性項(xiàng)目。值 flex 使彈性容器成為塊級(jí)元素。值 inline-flex 使彈性容器成為單個(gè)不可分的行內(nèi)級(jí)元素。

B、flex-direction

flex-direction 表示 Flexbox 內(nèi)容元素的「排列方向」，分別有下列四種。

• row：預(yù)設(shè)值，由左到右，從上到下

• row-reverse：與 row 相反

• column：從上到下，再由左到右

• column-reverse：與 column 相反

C、justify-content

justify-content 決定了內(nèi)容元素與整個(gè) Flexbox 的「水平對(duì)齊」位置，回想一下最上面講的 Flexbox 盒子模型，具有 main start 與 main end 左右兩個(gè)端點(diǎn)，justify-content 就是按照這個(gè)方式做設(shè)定，而其中的設(shè)定值總共有下列五個(gè)。

• flex-start：預(yù)設(shè)值，對(duì)齊最左邊的 main start

• flex-end：對(duì)齊最左邊的 main end

• center：水平置中

• space-between：平均分配內(nèi)容元素，左右元素將會(huì)與 main start 和 main end 貼齊

• space-around：平均分配內(nèi)容元素，間距也是平均分配

D、align-items

align-items 剛好和 justify-content 相反，align-items 決定了內(nèi)容元素與整個(gè) Flexbox 的「垂直對(duì)齊」位置，再回想一下最上面講的 Flexbox 盒子模型，具有 cross start 與 cross end 左右兩個(gè)端點(diǎn)，align-items 與 align-self 就是按照這個(gè)方式做設(shè)定，設(shè)定值總共有下列五個(gè)。

• flex-start：預(yù)設(shè)值，對(duì)齊最上面的 cross start

• flex-end：對(duì)齊最下面的 cross end

• center：垂直置中

• stretch：將內(nèi)容元素全部撐開至 Flexbox 的高度

• baseline：以所有內(nèi)容元素的基線作為對(duì)齊標(biāo)準(zhǔn)

E、align-self

align-self 的設(shè)定與 align-items 相同，但目的不同，align-self 的作用在于覆寫已經(jīng)套用 align-items 的屬性，如果照我們以前所寫，因?yàn)?align-items 是針對(duì)子元素，所以必須要用 align-self 來(lái)進(jìn)行覆寫，我們直接用上一個(gè)范例來(lái)修改就很清楚了。

• auto

設(shè)置為父元素的 align-items 值，如果該元素沒(méi)有父元素的話，就設(shè)置為 stretch。

• flex-start

flex 元素會(huì)對(duì)齊到 cross-axis 的首端。

• flex-end
  flex 元素會(huì)對(duì)齊到 cross-axis 的尾端。

• center
  flex 元素會(huì)對(duì)齊到 cross-axis 的中間，如果該元素的 cross-size 的尺寸大于 flex 容器，將在兩個(gè)方向均等溢出。

• baseline
  所有的 flex 元素會(huì)沿著基線對(duì)齊。

• stretch
  flex 元素將會(huì)基于容器的寬和高，按照自身 margin box 的 cross-size 拉伸。

F、align-content

剛剛談到的 align-items 是針對(duì)內(nèi)容為單行的元素進(jìn)行處理，如果遇到多行的元素，就要使用 align-content 這個(gè)屬性，這個(gè)屬性總共有六個(gè)設(shè)定值。( 范例：css-flexbox-demo6.html、W3C 說(shuō)明 )

• flex-start：預(yù)設(shè)值，對(duì)齊最上面的 cross start

• flex-end：對(duì)齊最下面的 cross end

• center：垂直置中

• space-between：將第一行與最后一行分別對(duì)齊最上方與最下方

• space-around：每行平均分配間距

• stretch：內(nèi)容元素全部撐開

G、flex-wrap

在剛剛的范例看到一個(gè) flex-wrap 的屬性，這個(gè)屬性負(fù)責(zé)的是讓內(nèi)容的元素?fù)Q行，因?yàn)楫?dāng)我們把父元素的 display 設(shè)定為 flex 或 inline-flex 的時(shí)候，子元素就是以單行的方式，彈性撐滿父元素，所以就要利用 flex-wrap 來(lái)?yè)Q行，共有三個(gè)設(shè)定值。( 范例：css-flexbox-demo7.html)

• nowrap：預(yù)設(shè)值，單行

• wrap：多行

• wrap-reverse：多行，但內(nèi)容元素反轉(zhuǎn)

H、order

剛剛在 flex-wrap 的屬性里頭看到了可以把元素反轉(zhuǎn)，order 這個(gè)屬性更是可以直接指定一個(gè)數(shù)字，就可以由小到大的排列順序

I、flex

好酒沉甕底，有耐心看到下面的才會(huì)看到重點(diǎn)喔哈哈！flex 應(yīng)該是 Flexbox 里頭最重要的屬性了，而 flex 其實(shí)是由三個(gè)屬性組合而成，依照先后順序分別是「flex-grow」、「flex-shrink」和「flex-basis」，如果 flex 只填了一個(gè)數(shù)值 ( 無(wú)單位 )，那麼預(yù)設(shè)就是以 flex-grow 的方式呈現(xiàn)，至于三個(gè)屬性的解釋如下：

flex-grow：數(shù)字，無(wú)單位，當(dāng)子元素的 flex-basis 長(zhǎng)度「小」于它自己在父元素分配到的長(zhǎng)度，按照數(shù)字做相對(duì)應(yīng)的「伸展」比例分配，預(yù)設(shè)值為 1，設(shè)為 0 的話不會(huì)進(jìn)行彈性變化，不可為負(fù)值。

flex-shrink：數(shù)字，無(wú)單位，當(dāng)子元素的 flex-basis 長(zhǎng)度「大」于它自己在父元素分配到的長(zhǎng)度，按照數(shù)字做相對(duì)應(yīng)的「壓縮」比例分配，預(yù)設(shè)值為 1，設(shè)為 0 的話不會(huì)進(jìn)行彈性變化，不可為負(fù)值。

flex-basis：子元素的基本大小，作為父元素的大小比較基準(zhǔn)，預(yù)設(shè)值為 0，也因?yàn)轭A(yù)設(shè)值為 0，所以沒(méi)有設(shè)定此屬性的時(shí)候，會(huì)以直接採(cǎi)用 flex-grow 屬性，flex-basis 也可以設(shè)為 auto，如果設(shè)為 auto，就表示子元素以自己的基本大小為單位。。

三個(gè)屬性可以分開設(shè)定，也可以合在一起用一個(gè) flex 統(tǒng)一設(shè)定，下面的例子展現(xiàn)出同一個(gè) Flexbox，在不同的寬度，子元素會(huì)有不同大小的呈現(xiàn)。

HTML代碼：

CSS代碼：

如果用動(dòng)畫來(lái)表現(xiàn)，可以看出拉長(zhǎng)的時(shí)候紅色會(huì)變得比藍(lán)色長(zhǎng)，但壓縮的時(shí)候卻是藍(lán)色變得比紅色長(zhǎng)，如此一來(lái)就更能體會(huì) flex 在響應(yīng)式設(shè)計(jì)里頭的關(guān)鍵腳色蘿！