許久未碰前端，今日發現把居然flex佈局屬性忘得差不多了，複習一下。
flex佈局就是將flex item放置在flex container中，透過在container或item上新增屬性來非常容易的改變佈局。
容器屬性
-
flex-direction—————決定主軸的排列方向，屬性決定從哪邊開始
- row ————————從main axis的左端開始排列
- row-reverse ————從main axis的右端開始排列
- column ——————從cross axis的上方排列
- column-reverse———從cross axis的下方排列
-
flex-wrap ————————所有item排在一條axis上，屬性決定如何換行
- nowrap ——————不換行
- wrap ———————第一行在上方
- wrap-reverse ————第一行在下方
-
flex-flow———————flex-direction和flex-wrap和集合，屬性用
||隔開 -
justify-content————在main axis上的對齊方式
- flex-start ——————左對齊
- flex-end ——————右對齊
- center ———————居中
- space-between ———兩端對齊
- space-around ———分散對齊
-
align-items—————在cross axis上如何對齊
- flex-start ——————下方對齊
- flex-end ———————上方對齊
- center ————————中點對齊
- baseline ———————第一行文字的基線對齊
- stretch————————預設，佈滿整個容器高度
-
align-content——————多根軸的對齊方式
- flex-start：與交叉軸的起點對齊
- flex-end：與交叉軸的終點對齊
- center：與交叉軸的中點對齊
- space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
- space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍
- stretch（預設值）：軸線佔滿整個交叉軸
專案屬性
- order————————排列順序
- flex-grow——————專案放大比例
- flex-shrink——————縮小比例
- flex-basis——————佔據主軸空間
- flex————————flex-grow, flex-shrink 和 flex-basis的合集
- align-self——————允許單個專案有與其他專案不一樣的對齊方式，優先順序最高