為了做移動(dòng)端的前端項(xiàng)目開(kāi)始學(xué)flex啦～！用了flex，再也不用擔(dān)心排版啦。一起來(lái)快速上手吧！

在css上使用flex的語(yǔ)法

display: flex; /*按照需求加入各瀏覽器需求前綴*/

flex-direction
(適用于父類容器元素)

flex-direction:row;

a
b
c

flex-direction:row-reverse;

a
b
c

flex-direction:column;

a
b
c

flex-direction:column-reverse;

a
b
c

flex-wrap
(適用于父類容器元素)

設(shè)置或檢索伸縮盒對(duì)象的子元素超出父容器時(shí)是否換行。
flex-wrap: nowrap | wrap | wrap-reverse

flex-wrap:nowrap;

a
b
c

flex-wrap:wrap;

a
b
c

flex-wrap:wrap-reverse;

a
b
c

flex-flow
(適用于父類容器元素)

相當(dāng)于direction和wrap的集合
flex-flow: row nowrap;/* 順序排列且不換行 */
flex-flow:row-reverse wrap;/* 反序排列且自動(dòng)換行 */

justify-content
(適用于父類容器元素)

設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式。
justifu-content: flex-start | flex-end | center | space-between | space-around

justify-content:flex-start;

a
b
c

justify-content:flex-end;

a
b
c

justify-content:center;

a
b
c

justify-content:space-between;
space-between：彈性盒子元素會(huì)平均地分布在行里。如果最左邊的剩余空間是負(fù)數(shù)，或該行只有一個(gè)子元素，則該值等效于’flex-start’。在其它情況下，第一個(gè)元素的邊界與行的主起始位置的邊界對(duì)齊，同時(shí)最后一個(gè)元素的邊界與行的主結(jié)束位置的邊距對(duì)齊，而剩余的伸縮盒項(xiàng)目則平均分布，并確保兩兩之間的空白空間相等。

a
b
c

justify-content:space-around;
space-around：彈性盒子元素會(huì)平均地分布在行里，兩端保留子元素與子元素之間間距大小的一半。如果最左邊的剩余空間是負(fù)數(shù)，或該行只有一個(gè)伸縮盒項(xiàng)目，則該值等效于’center’。在其它情況下，伸縮盒項(xiàng)目則平均分布，并確保兩兩之間的空白空間相等，同時(shí)第一個(gè)元素前的空間以及最后一個(gè)元素后的空間為其他空白空間的一半。

a
b
c

align-items
(適用于父類容器元素)

設(shè)置或檢索彈性盒子元素在側(cè)軸（縱軸）方向上的對(duì)齊方式。
align-items: flex-start | flex-end | center | baseline | stretch

align-items:flex-start;

a
b
c

align-items:flex-end;

a
b
c

align-items:center;

a
b
c

align-items:baseline;
baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與’flex-start’等效。其它情況下，該值將參與基線對(duì)齊。

a
b
c

align-items:strecth;