Flexbox

實作範例

container ( parent )

display: flex 指定 DOM 為 flexbox。

flex-direction | row / column / row-reverse / column-reverse

• row main-axis 由左至右 cross-axis 由上至下

• row-reverse main-axis 由右至左 cross-axis 由上至下

• column main-axis 由上至下 cross-axis 由左至右

• column-reverse main-axis 由下至上 cross-axis 由左至右

flex-wrap | nowrap / wrap / wrap-reverse

• nowrap 內容會超出 container

• wrap 內容不會超出 container，會自動換行

• wrap-reverse 內容不會超出 container，但 cross-axis 會相反。

justify-content | flex-start / flex-end / center / space-between / space-around / space-evenly

控制 main-axis 剩餘空間的排版

align-content | stretch / flex-start / flex-end / center / space-between / space-around

控制 cross-axis 剩餘空間的排版

align-items | stretch / flex-start / flex-end / center / baseline

控制 cross-axis 內容的排版

• stretch 占滿整個空間

• flex-start 向頭對齊

• flex-end 向尾對齊

• center 置中對齊

• space-between 頭尾沒有空間，空間分散到檔案間

• space-around

• space-evenly 空間平均分布

• baseline 對齊第一行

item ( children )

align-self | stretch / flex-start / flex-end / center / baseline

覆蓋 align-items 的設定

flex | flex-grow / flex-shrink / flex-basis

• flex-grow 0 不分配剩餘空間 >= 1 按比例分配剩餘空間

• flex-shrink 1 剩餘空間不夠，會自動縮減 item 空間，0 不會縮減 item 空間。

• flex-basis 設定 item width

order

設定 item 的排列順序 >0 往後排列 <0 往前排列

寬度的判定

content —> width —> flex-basis (limted by max|min-width)