一、Flex布局
Flex是Flexible Box的縮寫，意為"彈性布局盒模型"，用來為盒狀模型提供最大的靈活性，給予容器控制內部元素高度和寬度的能力。任何一個容器都可以指定為Flex布局，行內元素也可以使用Flex布局。它得到以下瀏覽器的支持：
注意，設為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。 其中在webkit內核的瀏覽器中使用時，必須加上-webkit-前綴。
二、Flex item
使用flex布局的容器（flex container），它內部的元素自動成為flex項目（flex item）。
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
flex item默認沿主軸排列。單個項目在主軸方向上占據的空間叫做main size，在交叉軸方向上占據的空間叫做cross size。
三、容器的屬性
容器的6個屬性
? flex-direction
? flex-wrap
? flex-flow
? justify-content
? align-items
? align-content
1、flex-direction
決定主軸的方向，即項目的排列方向。 row:主軸為水平方向，項目沿主軸從左至右排列 column：主軸為豎直方向，項目沿主軸從上至下排列 row-reverse：主軸水平，項目從右至左排列，與row反向 column-reverse：主軸豎直，項目從下至上排列，與column反向
2、flex-wrap
默認情況下，項目排列在一條線上，即主軸上，flex-wrap決定，如果排列不下時，是否換行以及換行的方式。 nowrap（默認）：不換行。 wrap：換行，第一行在上方。 wrap-reverse：換行，第一行在下方。
3、flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式。如：row wrap|column wrap-reverse等。默認值為row nowrap，即橫向排列 不換行。
4、justify-content
決定item在主軸上的對齊方式，可能的值有flex-start（默認），flex-end，center，space-between，space-around。 當主軸沿水平方向時，具體含義為 flex-start：左對齊 flex-end：右對齊 center：居中對齊 space- between：兩端對齊 space-around：沿軸線均勻分布
5、align-items
決定了item在交叉軸上的對齊方式，可能的值有flex-start、flex-end、center、baseline、stretch。 當主軸水平時，其具體含義為 flex-start：頂端對齊 flex-end：底部對齊 center：豎直方向上居中對齊 baseline：item第一行文字的底部對齊 stretch：當item未設置高度時，item將和容器等高對齊
6、align-content
該屬性定義了當有多根主軸時，即item不止一行時，多行在交叉軸軸上的對齊方式。如果項目只有一根軸線，該屬性不起作用。注意當有多行時，定義了align-content后，align-items屬性將失效。align-content可能值含義如下（假設主軸為水平方向）： flex-start：左對齊 flex-end：右對齊 center：居中對齊 space- between：兩端對齊 space-around：沿軸線均勻分布 stretch：各行將根據其flex-grow值伸展以充分占據剩余空間
四、flex item的屬性
item的屬性在item的style中設置。item六種屬性。
? order
? flex-grow
? flex-shrink
? flex-basis
? flex
? align-self
1、order
order的值是整數，默認為0，整數越小，item排列越靠前。
2、flex-grow
定義了當flex容器有多余空間時，item是否放大。默認值為0，即當有多余空間時也不放大；可能的值為整數，表示不同item的放大比例。
3、flex-shrink
定義了當容器空間不足時，item是否縮小。默認值為1，表示當空間不足時，item自動縮小，其可能的值為整數，表示不同item的縮小比例。flex-grow。
4、flex-basis
屬性定義了在分配多余空間之前，項目占據的主軸空間。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。
5、flex
flex屬性是flex-grow、flex-shrink和flex-basis三屬性的簡寫總和。默認值為0 1 auto。后兩個屬性可選。
6、align-self
align-self屬性允許item有自己獨特的在交叉軸上的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。 auto：和父元素align-self的值一致 flex-start：頂端對齊 flex-end：底部對齊 center：豎直方向上居中對齊 baseline：item第一行文字的底部對齊 stretch：當item未設置高度時，item將和容器等高對齊
