一、flex布局
學習flex彈性布局為了解決一些特殊的布局，在這之前我們可以利用大盒子套小盒子，浮動，定位等來完成一些簡單的布局，但是不能完成有些特殊的布局。
1、任何一個容器都可以設為flex布局，稱該容器為flex容器，它的所有子元素成為flex項目。（塊級元素也可以使用flex布局）
2、項目默認沿主軸排列，主軸默認在水平方向，交叉軸默認在垂直方向。
二、對于容器有哪些設置屬性？
1、首先我們要給一個父盒子設置為彈性布局display:flex
2、指定為flex布局后，我們對該容器可以有下面6種屬性設置。
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
(1)、flex-direction屬性決定主軸的方向（即項目的排列方向），它有四個屬性值
flex-direction: row | row-reverse | column | column-reverse;
row:(默認值)：主軸為水平方向，起點在左端
row-reverse:主軸為水平方向，七點在右端
column：主軸為垂直方向，起點在上沿
column：主軸為垂直方向，起點在下沿
(2)、flex-wrap屬性定義：如果一條軸線排不下，如何換行。它有三個值：
flex-wrap: nowrap | wrap | wrap-reverse;
nowrap（默認）：不換行
wrap:換行，第一行在上面
wrap-reverse:換行，第一行在下方
nowrap默認不換行時，如果容器寬度小于所有項目寬度總和，項目寬度會自適應容器寬度
項目大下不變，當容器裝不下時會換到下一行
換行，但是顛倒上下行順序
(3)、以上兩種屬性可以簡寫為：
flex-flow: <flex-direction> || <flex-wrap>(4)、justify-content屬性定義了項目在主軸上的對齊方式。它有五個值。
justify-content: flex-start | flex-end | center | space-between | space-around;
下面假設主軸為從左到右：
flex-start(默認值)：左對齊
flex-end:右對齊
center：居中
space-between:兩端對齊，項目之間的間隔都相等。
space-around：每個項目兩側的間隔相等,所以，最左和最右邊的項目離邊框的間隔是項目與項目之間間隔的一半。
(5)、align-items屬性定義項目在交叉軸上如何對齊，它有五個值：
align-items: flex-start | flex-end | center | baseline | stretch ;
具體的對齊方式與交叉軸的方向有關，下面假設交叉軸從上到下：
flex-start:交叉軸的起點對齊
flex-end:交叉軸的終點對齊。
baseline:項目的第一行文字的基線對齊。
stretch(默認值)：如果項目未設置高度或設為auto，將占滿整個容器的高度。
(6)、align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。它有五個值。
flex-start:與交叉軸的起點對齊
flex-end:與交叉軸的終點對齊。
center：與交叉軸的中點對齊
space-between:與交叉軸兩端對齊，軸線之間的間隔平均分布。
