一、Flex布局是什么？
Flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。
任何一個容器都可以指定為Flex布局。
.box{? display: flex;}
行內(nèi)元素也可以使用Flex布局。
.box{? display: inline-flex;}
Webkit內(nèi)核的瀏覽器，必須加上-webkit前綴。
.box{? display: -webkit-flex; /* Safari */? display: flex;}
注意，設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。
二、基本概念
采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱”項目”。
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結(jié)束位置叫做main end；交叉軸的開始位置叫做cross start，結(jié)束位置叫做cross end。
項目默認沿主軸排列。單個項目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size。
三、容器的屬性
以下6個屬性設(shè)置在容器上。
分別是：flex-direction????????flex-wrap ? ? ? flex-flow????????justify-content????????align-items????????align-content
1. ? ?flex-direction ? ? 決定主軸的方向（即項目的排列方向）
????????flex-direction: row | row-reverse | column | column-reverse;
????????它有四個值：
????????????????row（默認值）：以X軸，從左開始排序。
????????????????row-reverse：以X軸，從右開始排序。
????????????????column：以Y軸，從左角上開始。
????????????????column-reverse：以Y軸，從左角下開始。
2. ?flex-wrap ? ?默認情況下，項目都排在一條線（又稱”軸線”）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
? ?????? flex-wrap: nowrap | wrap | wrap-reverse;
? ? ? ? 它有三個值：
? ??????????????nowrap（默認）：不換行。
????????????????wrap：換行，第一行在上方。
? ??????????????wrap-reverse：換行，第一行在下方。
3. ?flex-flow
? ??????flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式（此值可調(diào)用前兩者的值），默認值為row nowrap。
4. ?justify-content ? 定義了項目在主軸上的對齊方式。
? ?????? justify-content: flex-start | flex-end | center | space-between | space-around;
? ? ? ? 它有五個值：
? ??????????????flex-start（默認值）：左對齊
????????????????flex-end：右對齊
????????????????center： 居中
????????????????space-between：兩端對齊邊框，項目之間的間隔都相等。
????????????????space-around：項目離邊框兩端相等的距離（假設(shè)距離為1），項目間隔是于邊框的距離兩倍（那么距離為2）。
????????????????space-evenly： 每個項目間隔相等，距離邊框也相等，等分。
5. ?align-items? ??????定義項目在交叉軸上如何對齊。
????????align-items: flex-start | flex-end | center | baseline | stretch;
????????它可能取五個值（目前可能有八個值，常用的可能只有三四個）：
? ??????????????flex-start：左上角對齊。
????????????????flex-end：左下角對齊。
????????????????center：延左邊框上下居中。
????????????????baseline: 項目的第一行文字的基線對齊。
????????????????stretch（默認值）：如果項目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度
6. ?align-content ?? ??????定義了多根軸線的對齊方式。如果項目只有一根軸線（即只有一行），該屬性不起作用。
? ?????? align-content: flex-start | flex-end | center | space-between | space-around | stretch;
? ? ? ? 該屬性可能取六個值：
? ??????????????flex-start：與交叉軸的起點對齊。
????????????????flex-end：與交叉軸的終點對齊。
????????????????center：與交叉軸的中點對齊。
????????????????space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
????????????????space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
????????????????stretch（默認值）：軸線占滿整個交叉軸。
四、項目的屬性
以下6個屬性設(shè)置在項目上。? ??
分別是：order?? ??flex-grow ? ? ? flex-shrink????????flex-basis????????flex????????align-self
1.?flex ??
該屬性是 flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。
????????auto等同于（flex-shrink：1）；
2.??order? ??????定義項目的排列順序。數(shù)值越小，排列越靠前，默認為0。
????????order： integer ;
3. ?align-self? ?????
允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。
（解釋以方便理解和觀看，不足之處望指出）
