彈性盒模型

flex-direction:row  //(預設)主軸為水平方向,起點在左端。
flex-direction:row-reverse  //主軸為水平方向,起點在右端
flex-direction:column  //使用後會使主軸變為y軸
flex-firection:column-reverse  //主軸為垂直方向,起點在下沿。複製程式碼

flex-wrap:nowrap //(預設)不換行
flex-wrap:wrap  //換行,第一行在上方
flex-wrap:wrap-reverse   //換行,第一行在下方複製程式碼

flex-flow:該屬性是flex-direction屬性和flex-wrap屬性的簡寫形式。
 
flex-flow:值1(主軸方向) 值2(是否換行)
flex-flow:row nowrap  //(預設)複製程式碼

justify-content:flex-start  //(預設)左對齊
justify-content:flex-end  //右對齊
justify-content:center  //居中(子元素緊湊居中)
justify-content:space-between;  //兩端對齊,專案之間的間隔都相等
justify-content:space-around;  //每個專案兩側的間隔相等複製程式碼

align-items:flex-start   //與交叉軸的起點對其
align-items:flex-end   //與交叉軸的終點即末尾對其
 
align-items:center   //與交叉軸的中點對其
align-items:baseline   //項⽬的第⼀⾏⽂字的基線對齊
align-items:stretch   //如果項⽬未設定⾼度或設為auto，將佔滿整個容器的⾼度複製程式碼

align-content屬性,緊跟於flex-wrap屬性後,該屬性用於修飾flex-wrap屬性
align-content:flex-start   //與交叉軸的起點對齊
align-content:flex-end   //與交叉軸的終點對其
align-content:center   //與交叉軸的中點對齊
align-content:space-between   //與交叉軸兩端對齊，軸線之間的間隔平均分佈
 
align-content:space-around   //每根軸線兩側的間隔都相等複製程式碼

align-self:center
//允許單個元素與其他元素有不一樣的對齊方式
//在彈性子元素上使用。覆蓋容器的 align-items 屬性。複製程式碼

order屬性: (自定義子元素的顯示順序) 
//用整數值來定義排列順序，數值小的排在前面。可以為負值。
//注: 預設值為0。父元素必須設定為彈性盒模型
align-self:flex-start   //預設
align-self:flex-end   //終點複製程式碼

flex-grow屬性:(定義彈性盒子元素的擴充套件比率)
//表示的是當容器有多餘的空間時，這些空間在不同條目之間的分配比例
//比如，一個容器中有 3 個條目，其"flex-grow"屬性的值分別為 1，2 和 3
//那麼當容器中有空白空間時，這 3 個條目所獲得的額外空白空間分別佔
//全部空間的 1/6、1/3 和 1/2複製程式碼

flex-shrink屬性:(定義彈性盒子元素的收縮比率)
//該屬性的值也是無單位的,表示的是當容器的空間不足各個條目的尺寸縮小的比例。
//例如,在容器中有 3 個條目,其"flex-shrink"屬性的值分別為 1，2 和 3。
//每個條目的主軸尺寸均為 200px。當容器的主軸尺寸不足 600px 時,
//比如變成了 540px 之後則需要縮小的尺寸 60px 由 3 個條目按照比例來分配。
//3 個條目分別要縮小 10px、20px 和 30px,
//主軸尺寸分別變為 190px、180px 和 170px複製程式碼