Flex簡介：

?? ?當(dāng)元素的display屬性設(shè)置為flex的時候，該元素則是Flex容器，它的所有子元素自動成為容器的成員，則稱為Flex項目（flex item），且Flex項目會脫離一般文檔流變成Flex文檔流。

容器的屬性：

? ?1、flex-direction：決定容器成員的排列方向（在flex容器中的子元素，脫離普通文檔流，成為flex文檔流）

? ??? ① row（默認(rèn)）：水平方向，從左到右，起點在左

?? ?? ②?row-reverse ：水平方向，從右到左，起點在右

? ? ? ③ column：垂直方向，從上到下，起點在上

?? ?? ④ column-reverse：垂直方向，從下到上，起點在下

? ?2、flex-wrap：決定容器內(nèi)成員排列時，是否換行（換行只會在容器寬度裝不下成員的情況，才會發(fā)生）

? ? ? ? ① nowrap（默認(rèn)）：容器成員都只排在一條軸線上，即 容器成員寬度總和 大于 容器寬度，都不換行，而是自動平均壓縮成員寬度，使所有成員排序在該軸線上。

?? ?? ②?wrap：換行，第一行在容器上方

? ? ? ③ wrap-reverse：換行，第一行在容器下方

? ?3、flex-flow：該屬性是flex-direction和flex-wrap的簡寫形式

?? ?? ? ① row nowrap（默認(rèn)值）

② 參考上面取值，第一個值是flex-direction，第二個值是flex-wrap

? ?4、justify-content：決定容器成員在主軸上的水平對其方式

?? ?? ? ① flex-start（默認(rèn)值）：左對齊

?? ?? ? ② flex-end：右對齊

?? ?? ? ③ center：居中

?? ?? ? ④ space-between：兩端對其，同一條主軸上的成員之間間隔相等

?? ?? ? ⑤ space-around：每個成員兩側(cè)的間隔相等，且最左邊或者最右邊的成員與容器邊框的距離比成員間距離小一倍

? ? 5、align-items：決定容器成員在交叉軸上的垂直對其方式（注意：該屬性無法設(shè)置wrap換行的容器成員）

?? ?? ? ① stretch（默認(rèn)值）：如果成員未設(shè)置高度或者設(shè)為auto，將占滿整個容器的高度

?? ?? ? ② flex-start：垂直方向，最上方對其（如果成員沒有設(shè)置高度，則靠成員的內(nèi)容撐起高度）

?? ?? ? ③ flex-end：垂直方向，最下方對其（如果成員沒有設(shè)置高度，則靠成員的內(nèi)容撐起高度）

?? ?? ? ④ center：垂直方向，居中對其（如果成員沒有設(shè)置高度，則靠成員的內(nèi)容撐起高度）

????????⑤ baseline：項目的第一行文字的基線對其，簡單說就是：找到成員里第一行文字在最下面，其他成員的第一行文字進(jìn)行對其（如果成員沒有設(shè)置高度，則靠成員的內(nèi)容撐起高度）

? ?6、align-content：多根軸線（已設(shè)置wrap并換行的容器才有效）在交叉軸上的垂直對其方式

?? ?? ? ① stretch（默認(rèn)值）：如果成員未設(shè)置高度或者設(shè)為auto，多行成員平均分配占滿整個容器的高度

?? ?? ? ② flex-start：垂直方向，最上方對其（如果成員沒有設(shè)置高度，則靠成員的內(nèi)容撐起高度）

?? ?? ? ③ flex-end：垂直方向，最下方對其（如果成員沒有設(shè)置高度，則靠成員的內(nèi)容撐起高度）

?? ?? ? ④ center：垂直方向，居中對其（如果成員沒有設(shè)置高度，則靠成員的內(nèi)容撐起高度）

? ? ? ? ⑤space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布行文字進(jìn)行對其

? ? ? ? ⑥space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。

容器成員（Flex項目）的屬性：

??order：屬性定義項目的排列順序。數(shù)值越小，排列軸線方向的越靠前，默認(rèn)為0。

??flex-grow：成員的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。

?? ?? ? ① 如果設(shè)置為1，則告訴該成員需要放大容器剩余寬度（成員之間間隙就會不見）

?? ?? ? ② 如果是設(shè)置2或者2以上，且同軸的其他成員也有設(shè)置該屬性，則按照互相之間的比例進(jìn)行分配剩余空間

? ?flex-shrink：該屬性定義了項目的縮小比例，默認(rèn)為1，即如果容器的空間不足，該元素將縮小。(當(dāng)容器為nowrap不換行時才會有效)

????????①如果所有項目的flex-shrink屬性都為1，當(dāng)空間不足時，都將等比例縮小。

?? ?? ? ②?如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。

?? ?flex-basis：該屬性定義了在分配多余空間之前，成員占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認(rèn)值為auto，即項目的本來大小。

????????①它可以設(shè)為跟width或height屬性一樣的值（比如350px），則成員將占據(jù)固定空間，不受flex-grow和flex-shrink改變成員大小。

?? ?flex：該屬性是 flex-grow,? flex-shrink 和 flex-basis 的簡寫，默認(rèn)值為 0 1 auto。后兩個屬性可選，寫或不寫都能配置。

?? ?align-self：允許單個成員有與其他成員有不一樣的對齊方式，可覆蓋該成員身上的align-items屬性。

?? ?? ? ①?默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。

????????② 取值參考align-items的所有取值。