一、定義

彈性盒子是一種用于按照布局元素的一維布局方法，它可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局。

容器中存在兩條軸，主軸和交叉軸(相當(dāng)于我們坐標(biāo)軸的x軸和y軸)。我們可以通過(guò)flex-direction來(lái)決定主軸的方向。

• 主軸（main axis）是沿著 flex 元素放置的方向延伸的軸（比如頁(yè)面上的橫向的行、縱向的列）。該軸的開始和結(jié)束被稱為?main start?和?main end。
• 交叉軸（cross axis）是垂直于 flex 元素放置方向的軸。該軸的開始和結(jié)束被稱為?cross start?和?cross end。
• 設(shè)置了?display: flex?的父元素被稱之為?flex 容器（flex container）。
• 在 flex 容器中表現(xiàn)為彈性的盒子的元素被稱之為?flex 項(xiàng)（flex item）。

二、屬性

flex常用的屬性可以劃分為容器屬性和容器成員屬性

容器屬性：

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

flex-direction

它可以決定主軸的方向。

通常我們?cè)谑褂脧椥院凶?#xff0c;實(shí)在其父元素上使用display:flex來(lái)實(shí)現(xiàn)彈性盒子的布局。

flex-direction默認(rèn)為row，表示當(dāng)前是根據(jù)行橫向布局，如果我們想要實(shí)現(xiàn)縱向布局我們可以設(shè)置屬性為column這是常用的屬性，通常還存在一些其他屬性，可以控制我們排列的方向以及是正向排序還是逆向排序。

屬性對(duì)應(yīng)如下：

• row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端
• row-reverse：主軸為水平方向，起點(diǎn)在右端
• column：主軸為垂直方向，起點(diǎn)在上沿。
• column-reverse：主軸為垂直方向，起點(diǎn)在下沿

flex-wrap

通過(guò)flex-wrap決定容器內(nèi)項(xiàng)目是否可換行

通常如果我們使用彈性布局，在定寬定高的情況下，我們?nèi)绻囟嗟那闆r下會(huì)超出我們的盒子布局，那么我們想要實(shí)現(xiàn)換行就可以使用到flex-wrap完成換行。

屬性對(duì)應(yīng)如下：

• nowrap（默認(rèn)值）：不換行
• wrap：換行，第一行在下方
• wrap-reverse：換行，第一行在上方

flex-flow

我們可以通過(guò)flex-flow來(lái)實(shí)現(xiàn)flex-direction和flex-wrap的簡(jiǎn)寫形式。默認(rèn)值為row nowrap

它的屬性與flex-wrap 以及 flex-firection一樣，不過(guò)是將兩個(gè)屬性合并成一個(gè)屬性來(lái)使用。

justify-content

定義元素在主軸上的對(duì)齊方式

屬性對(duì)應(yīng)如下：

• flex-start（默認(rèn)值）：左對(duì)齊
• flex-end：右對(duì)齊
• center：居中
• space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等
• space-around：兩個(gè)項(xiàng)目?jī)蓚?cè)間隔相等

效果如下：

align-items

定義元素在交叉軸上如何對(duì)齊

屬性對(duì)應(yīng)如下：

• flex-start：交叉軸的起點(diǎn)對(duì)齊
• flex-end：交叉軸的終點(diǎn)對(duì)齊
• center：交叉軸的中點(diǎn)對(duì)齊
• baseline: 項(xiàng)目的第一行文字的基線對(duì)齊
• stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度

align-content

定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用

屬性對(duì)應(yīng)如嚇：

• flex-start：與交叉軸的起點(diǎn)對(duì)齊
• flex-end：與交叉軸的終點(diǎn)對(duì)齊
• center：與交叉軸的中點(diǎn)對(duì)齊
• space-between：與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布
• space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍
• stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸

效果如下：

容器成員屬性：

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

order

通常給子元素定義，數(shù)值越小排列順序越靠前，默認(rèn)值為0.如果想要將某個(gè)排列在后方的值往前排列，可以通過(guò)設(shè)置order為負(fù)值來(lái)實(shí)現(xiàn)。

flex-grow

定義項(xiàng)目的放大比例（容器寬度>元素總寬度時(shí)如何伸展）

默認(rèn)為0，即如果存在剩余空間，也不放大

如果所有項(xiàng)目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）

如果一個(gè)項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍

flex-shrink

定義了項(xiàng)目的縮小比例（容器寬度<元素總寬度時(shí)如何收縮），默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小

如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時(shí)，都將等比例縮小

如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1，則空間不足時(shí)，前者不縮小

在容器寬度有剩余時(shí)，flex-shrink也是不會(huì)生效的

flex-basis

設(shè)置的是元素在主軸上的初始尺寸，所謂的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸

瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間，默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小，如設(shè)置了width則元素尺寸由width/height決定（主軸方向），沒(méi)有設(shè)置則由內(nèi)容決定

當(dāng)設(shè)置為0的是，會(huì)根據(jù)內(nèi)容撐開

它可以設(shè)為跟width或height屬性一樣的值（比如350px），則項(xiàng)目將占據(jù)固定空間

flex

flex屬性是flex-grow,?flex-shrink?和?flex-basis的簡(jiǎn)寫，默認(rèn)值為0 1 auto，也是比較難懂的一個(gè)復(fù)合屬性

一些屬性有：

• flex: 1 = flex: 1 1 0%
• flex: 2 = flex: 2 1 0%
• flex: auto = flex: 1 1 auto
• flex: none = flex: 0 0 auto，常用于固定尺寸不伸縮

flex:1?和?flex:auto?的區(qū)別，可以歸結(jié)于flex-basis:0和flex-basis:auto的區(qū)別

當(dāng)設(shè)置為0時(shí)（絕對(duì)彈性元素），此時(shí)相當(dāng)于告訴flex-grow和flex-shrink在伸縮的時(shí)候不需要考慮我的尺寸

當(dāng)設(shè)置為auto時(shí)（相對(duì)彈性元素），此時(shí)則需要在伸縮時(shí)將元素尺寸納入考慮

注意：建議優(yōu)先使用這個(gè)屬性，而不是單獨(dú)寫三個(gè)分離的屬性，因?yàn)闉g覽器會(huì)推算相關(guān)值

align-self

允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性

默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒(méi)有父元素，則等同于stretch

效果圖如下：

flex項(xiàng)的動(dòng)態(tài)尺寸

如何控制 flex 項(xiàng)占用空間的比例呢？

我們?nèi)绻o一個(gè)元素定義flex:1

這是一個(gè)無(wú)單位的比例值，表示每個(gè) flex 項(xiàng)沿主軸的可用空間大小。

還可以指定 flex 的最小值

我們給某個(gè)元素定義flex:1 200px;

每個(gè) flex 項(xiàng)將首先給出 200px 的可用空間，然后，剩余的可用空間將根據(jù)分配的比例共享。嘗試刷新，你會(huì)看到分配空間的差別。

三、應(yīng)用場(chǎng)景

我們能夠通過(guò)flex簡(jiǎn)單粗暴的實(shí)現(xiàn)元素水平垂直方向的居中，以及在兩欄三欄自適應(yīng)布局中通過(guò)flex完成。

包括現(xiàn)在在移動(dòng)端、小程序這邊的開發(fā)，都建議使用flex進(jìn)行布局