1.成為彈性容器，彈性容器內(nèi)包含了一個(gè)或多個(gè)彈性子元素
.flex-box{
display:flex;
}
2.彈性容器屬性
（1）flex-direction：設(shè)置彈性子元素排列方式
- row（默認(rèn)）：橫向從左到右排列
- row-reverse：反轉(zhuǎn)橫向排列撤奸，最后一項(xiàng)排在最前面
- column：縱向排列
- column-reverse：反轉(zhuǎn)縱向排列波附，從后往前排块差，最后一項(xiàng)排在最上面
（2）justify-content：應(yīng)用在彈性容器上，把彈性子元素沿著彈性容器的主軸線對(duì)齊
- flex-start（默認(rèn)）：子元素向行頭緊挨著顯示
- flex-end：子元素向行尾緊挨著顯示
- center：子元素居中緊挨著顯示
- space-between：子元素平均分布在該行上嗤朴，多余空間在子元素之間平均分布
- space-around：子元素平均分布在該行上须肆，子元素兩邊留有一半的間隔空間
（3）align-items：設(shè)置彈性盒子元素在側(cè)軸（縱軸）方向上的對(duì)齊方式
- flex-start：子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界。
- flex-end：子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界合敦。
- center：元素在該行的側(cè)軸（縱軸）上居中放置
- baseline：如子元素的行內(nèi)軸與側(cè)軸為同一條初橘，則該值與'flex-start'等效。其它情況下蛤肌，該值將參與基線對(duì)齊
（4）flex-wrap：指定彈性盒子的子元素?fù)Q行方式
- nowrap（默認(rèn)）：彈性容器為單行壁却，該情況下彈性子項(xiàng)可能會(huì)溢出容器
- wrap - 彈性容器為多行，該情況下彈性子項(xiàng)溢出的部分會(huì)被放置到新行裸准，子項(xiàng)內(nèi)部會(huì)發(fā)生斷行
- wrap-reverse ：反轉(zhuǎn) wrap 排列
（5）align-content：用于修改 flex-wrap 屬性
- stretch （默認(rèn)）：各行將會(huì)伸展以占用剩余的空間
- flex-start ：各行向彈性盒容器的起始位置堆疊
- flex-end ： 各行向彈性盒容器的結(jié)束位置堆疊
- center ：各行向彈性盒容器的中間位置堆疊
- space-between ：各行在彈性盒容器中平均分布
- space-around ：各行在彈性盒容器中平均分布展东，兩端保留子元素與子元素之間間距大小的一半
3.彈性子元素重要屬性
- order： 決定彈性元素的排列順序，數(shù)字越小炒俱，越靠前
.first {
order: -1;
}
4.完美居中
flex-box{
display:flex;
justify-content:center;
align-items:center;
}
