# Flexbox

[實作範例 ](https://codepen.io/mistborn/pen/oRJJPw?editors=1100)

## 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)