傳統(tǒng)的網(wǎng)頁布局中，我們經(jīng)常使用display:block+margin+padding+float+position來實現(xiàn)，但隨著網(wǎng)頁越來越復(fù)雜，對于某些不確定寬高的元素想要實現(xiàn)垂直居中實際上是比較困難的，而隨著CSS3中Flex布局的出現(xiàn)，解決了傳統(tǒng)布局中一些不易實現(xiàn)的問題。

Flex是Flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。

Flex布局具有以下特點：

1、Flex布局與方向無關(guān)。
2、Flex布局可以實現(xiàn)空間的自動分配、自動對齊，具有很強的靈活性。
3、Flex布局試用于簡單的線性布局，更復(fù)雜的布局可以考慮用JS或者grid實現(xiàn)。

一、Flex布局的概念

在容器內(nèi)，默認(rèn)有兩條軸，水平方向為主軸（main axis），垂直方向為側(cè)軸（cross axis），主軸方向起始位置為主軸起點（main start），主軸方向終點位置為主軸終點（main end），側(cè)軸方向起始位置為側(cè)軸起點（cross start），主軸方向終點位置為主軸終點（cross end），容器的主尺寸為main size，側(cè)尺寸為cross size，容器內(nèi)的子元素為flex item，當(dāng)給container設(shè)置display:flex，每一個子元素都是container的item。

二、Flex容器的屬性

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

flex-direction屬性

flex-direction表示主軸的方向。

flex-direction: row（默認(rèn)值） | row-reverse | column | column-reverse;

row：主軸方向為水平方向，從左至右。

flex-direction:row;

row-reverse：主軸方向為水平方向，從右至左。

flex-direction:row-reverse;

column：主軸方向為垂直方向，從上至下。

flex-direction:column;

column-reverse：主軸方向為垂直方向，從下至上。

flex-direction:column-reverse;

flex-wrap屬性

flex-wrap: no-wrap（默認(rèn)）| wrap | wrap-reverse;

flex-wrap是指在主軸方向上如果項目過多排列不下時是否換行，默認(rèn)情況下是不換行的。
wrap:軸線方向換行，第一行在上。

flex-wrap:wrap;

wrap-reverse：軸線方向換行，第一行在下

flex-wrap:wrap-reverse;

flex-flow屬性

flex-flow是flex-direction和flex-wrap的簡寫，默認(rèn)為 row no-wrap。

flex-flow: <flex-direction> || <flex-wrap>;

justify-content屬性

justify-content是指主軸方向?qū)R方式。

justify-content:flex-start（默認(rèn)） | flex-end | center | space-between | space-around;

flex-start：主軸方向從左端對齊。

justify-content:flex-start;

flex-end：主軸方向從末端對齊。

justify-content:flex-end;

center：主軸方向從中間對齊。

justify-content:center;

space-between：主軸方向兩端對齊，項目之間的空間均勻分配。

justify-content:space-between;

space-around：每個項目兩側(cè)的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

justify-content:space-around;

align-items屬性

align-items 是指側(cè)軸方向?qū)R方式。

align-items: flex-start | flex-end | center | baseline | stretch;

flex-start：側(cè)軸方向上端對齊。

align-items:flex-start;

flex-end：側(cè)軸方向底端對齊。

align-items:flex-end;

center：側(cè)軸方向中心對齊。

align-items:center;

baseline：側(cè)軸方向上文字基線對齊。

align-items:baseline;

strech（默認(rèn)值）：如果項目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度。

align-items:strech;

align-content屬性

align-content屬性定義了多根軸線（多行或是多列）的對齊方式。如果項目只有一根軸線（一行或是一列），該屬性不起作用。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

flex-start：與交叉軸的起點對齊。

align-conten:flex-start;

flex-end：與交叉軸的終點對齊。

align-content: flex-end;

center：與交叉軸的中點對齊。

align-content: center;

space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。

align-content: space-between;

space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。

align-content: space-around;

stretch（默認(rèn)值）：軸線占滿整個交叉軸。

align-content: strech;

三、Flex項目的屬性

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

align-self屬性

align-self屬性定義flex的單個項目在側(cè)軸上的對齊方式，默認(rèn)為auto，表示繼承父元素的align-items，否則將覆蓋align-items屬性。

align-self: auto | flex-start | flex-end | center | baseline | stretch;

center：

align-self: center;

其他值與align-items屬性值用法相同。

flex-grow屬性

flex-grow定義項目的擴展比率（一般使用在空間過多時），默認(rèn)為0，即便存在剩余空間，也不放大。

flex-grow: <number> ;   /* default 0 */

如果所有的項目不為0，如1/2/3，則等分剩余空間，如果item1項目為1，其他項目為0，則item1占據(jù)所有剩余空間，如果item1項目為1，item2項目為2，則item2占據(jù)的剩余空間比item1多一倍。

.item1{flex-grow: 1;}

.item1{flex-grow: 1;} .item2{flex-grow: 2;}

flex-shrink屬性

flex-shrink定義項目的收縮比率（一般使用在空間不足時），默認(rèn)為1，即空間不足時，項目縮小，為0表示不縮小。
該屬性對負值無效。

 flex-shrink: <number>; /* default 1 */

如果所有項目均為1，則所有項目同比例縮小

.item{flex-shrink: 1;}

如果item1為0，其他item均為1，則item1不縮小，其他item同比例縮小

.item1{flex-shrink: 0;}

flex-basis屬性

flex-basis定義了在分配多余空間之前，項目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認(rèn)值為auto，即項目的本來大小。

 flex-basis: <length> | auto; /* default auto */

.item1{flex-basis: 400px;}

flex屬性

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認(rèn)值為0 1 auto。后兩個屬性可選。

 flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

order屬性

order屬性定義項目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。
該屬性對負值有效。

order: <integer>;

關(guān)于各屬性瀏覽器的支持程度可以在can I use中查看