「主軸」的方向是從左向右的，「交叉軸」垂直於主軸，逆時針方向90度。
交叉軸是由主軸決定的，主軸又是由flex-direction決定的。
flex-direction: row (預設)| row-reverse | column | column-reverse
justify-content: 「設定子元素在主軸方向上的對齊方式」
①flex-start②flex-end③center④space-between⑤space-around
align-items：「設定子元素在交叉軸方向上的對齊方式」
①center
②flex-start
③flex-end
④stretch(彈性元素被在側軸方向被拉伸到與容器相同的高度或寬度)
如果子容器未設定高度或者設為 auto，將佔滿整個容器的高度，設定高度按子容器高度。
⑤baseline
所有的子元素的第一行文字基線對齊(文字底部)
flex屬性 定義在主軸是如何伸縮的
flex:1 —> flex:1 1 0%：是flex-grow flex-shrink flex-basis的簡寫
align-self屬性 「單獨設定子容器如何沿交叉軸排列」
①flex-start
②flex-end
③baseline：基線對齊// 末尾段對齊
④stretch：拉伸對齊，子元素設定此屬性後，如果沒有設定高度的auto拉伸對齊
wrap/nowrap/wrap-reverse
flex-direction 和 flex-wrap 的簡寫
row/column | wrap/nowrap/wrap-reverse
定義子容器在交叉軸的排列方式，也就是對齊方式
normal/flex-start/flex-end/center/space-between/space-around/stretch/baseline/
子容器彈性伸展的比例：就是把剩餘的空間按比例分配給子容器。
子容器彈性收縮的比例：當子容器超出的部分，會按照對應的比例給子容器減去對應的值。
設定基準大小：當主軸為橫向時(row)flex-basis設定的大小為寬度，並且會覆蓋witdh值
設定排列序：可以是負值，數值越小的話，排的越靠前。
css布局之flex布局
網頁布局 layout 是css的乙個重點應用。布局的傳統解決方案，基於盒狀模型，依賴 display屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。2009年，w3c提出了一種新的方案 flex布局，可以簡便 完整 響應式地實現各種頁面布局。目...
css彈性布局（flex）
1 概念解讀 傳統的布局解決方案，基於盒狀模型，依賴 display 屬性 position屬性 float屬性。但對於一些特殊的布局方式 如垂直居中 傳統盒模型顯得有點力不從心，而對彈性布局 flex 來說卻很容易實現。2009年，w3c 提出了一種新的方案 flex 布局 flex是flexib...
CSS關於flex布局
注意 flexbox布局最適合應用程式的元件和小規模布局，而grid布局則適用於更大規模的布局 談flex布局前先了解下flex的基本屬性 flex的基本屬性有flex basis flex direction flex wrap flex flow flex grow flex shrink六個 ...