flex佈局屬性

許久未碰前端，今日發現把竟然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——————容許單個項目有與其餘項目不同的對齊方式，優先級最高