開啟flex佈局

display:flex;

開啟後

一、上級元素有6個屬性

• flex-direction：主軸方向（row預設值，主軸為水平方向，起點左端；row-reverse：主軸為水平方向，起點在右端；column：主軸為垂直方向，起點在上沿；column-reverse：主軸為垂直方向，起點在下沿）
• flex-wrap：nowarp預設不換行；wrap換行，第一行在上邊；wrap-reverse：換行，第一行在下方；
• flex-flow：是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap
• justify-content：flex-start（預設值）：左對齊；flex-end：右對齊；center：居中；space-between：兩端對其，專案之間的間隔相等；space-around：專案兩側之間的間距相等。
• align-items：stretch（預設值）：容器未設定高度或anto，將佔滿整個容器的高度。flex-start：交叉軸的起點對齊；flex-end：交叉周的重點對齊；center：交叉軸的中點對齊；baseline：第一個專案的文字基線對齊。 
• align-content（多根軸線的對齊，單個軸線不生效）：
  • flex-start：與交叉軸的起點對齊。
  • flex-end：與交叉軸的終點對齊。
  • center：與交叉軸的中點對齊。
  • space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
  • space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
  • stretch（預設值）：軸線佔滿整個交叉軸。

二、子元素屬性

order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0

flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大

flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。

flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。可以設為跟width或height屬性一樣的值（比如350px），則專案將佔據固定空間。

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值

align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。