flex是flexible box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。
衍生過程：display:box -> display:flexbox ->
display:flex
任何乙個容器都可以指定為flex布局。
行內元素也可以使用flex（inline-*）布局。
flex-direction：
決定主軸的方向（即專案的排列方向），主軸不是固定的，以這個值為準。
flex-wrap：預設情況下，專案都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
flex-flow：是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。（兩者合併書寫的方式）
justify-content：定義了專案在主軸上的對齊方式。
align-items：定義專案在交叉軸上如何對齊。
align-content定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。（已交叉軸為基準）
order：定義專案的排列順序。數值越小，排列越靠前，預設為0。（可以為負數）
flex-grow：定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。
flex-shrink：定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。（如果為0則不縮小）
flex-basis：定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。
flex：
是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。（建議優先寫這種形式）
(flex-grow和flex-shrink針對於剩餘空間分配的比例關係
)align-self:允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
相容性demo：
彈性布局flex小結
檢視css某個屬性的相容情況 calc 25 1px box sizing center box 向外擴充套件 box sizing border box 向內擴充套件 父級身上的屬性 display flex 新增瀏覽器字首 webkit postcss外掛程式 自動加字首 display web...
flex布局常見用法小結
1，display flex 這個在父容器中宣告 2，flex direction row column 預設為橫向，也在父容器中設定，定義flex布局的主軸方向 一條軸為主軸，那麼另一條軸自然而然就是副軸 3，flex 1 在子元素中設定，表示所有的子元素不管內容如何，其寬度和高度都完全一樣，且加...
flex布局常見用法小結
1，display flex 這個在父容器中宣告 2，flex direction row column 預設為橫向，也在父容器中設定，定義flex布局的主軸方向 一條軸為主軸，那麼另一條軸自然而然就是副軸 3，flex 1 在子元素中設定，表示所有的子元素不管內容如何，其寬度和高度都完全一樣，且加...