一、定義

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

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

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

二、屬性

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

容器屬性：

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

flex-direction

它可以決定主軸的方向。

通常我們在使用彈性盒子，實在其父元素上使用display:flex來實現(xiàn)彈性盒子的布局。

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

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

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

flex-wrap

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

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

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

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

flex-flow

我們可以通過flex-flow來實現(xiàn)flex-direction和flex-wrap的簡寫形式。默認(rèn)值為row nowrap

它的屬性與flex-wrap 以及 flex-firection一樣，不過是將兩個屬性合并成一個屬性來使用。

justify-content

定義元素在主軸上的對齊方式

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

• flex-start（默認(rèn)值）：左對齊
• flex-end：右對齊
• center：居中
• space-between：兩端對齊，項目之間的間隔都相等
• space-around：兩個項目兩側(cè)間隔相等

效果如下：

align-items

定義元素在交叉軸上如何對齊

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

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

align-content

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

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

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

效果如下：

容器成員屬性：

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

order

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

flex-grow

定義項目的放大比例（容器寬度>元素總寬度時如何伸展）

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

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

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

flex-shrink

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

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

如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小

在容器寬度有剩余時，flex-shrink也是不會生效的

flex-basis

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

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

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

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

flex

flex屬性是flex-grow,?flex-shrink?和?flex-basis的簡寫，默認(rèn)值為0 1 auto，也是比較難懂的一個復(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時（絕對彈性元素），此時相當(dāng)于告訴flex-grow和flex-shrink在伸縮的時候不需要考慮我的尺寸

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

注意：建議優(yōu)先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關(guān)值

align-self

允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性

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

效果圖如下：

flex項的動態(tài)尺寸

如何控制 flex 項占用空間的比例呢？

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

這是一個無單位的比例值，表示每個 flex 項沿主軸的可用空間大小。

還可以指定 flex 的最小值

我們給某個元素定義flex:1 200px;

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

三、應(yīng)用場景

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

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