# CSS Flex 筆記
###### tags: `front end`
## Flex 外容器屬性：
* display : flex
* flex-direction *(方向)*
1. row
2. row-reverse
3. column
4. column-reverse
* flex-wrap *(自動換行)*
1. nowrap
2. wrap
3. wrap-reverse
* align-content *(容器對齊; flex-direction 主軸的方向)*
1. flex-start
2. center
3. flet-end
4. space-between
5. space-around
* align-items *(內容物對齊; flex-direction 交錯軸的方向)*
1. flex-start
2. center
3. flet-end
4. stretch
5. baseline
* justify-content *(資料流對齊)*
1. flex-start
2. center
3. flet-end
4. space-between
5. space-around
## Flex 內元件屬性：
* order

    (-1,0,1)

* align-self
1. flex-start
2. center
3. flet-end
4. space-between
5. space-around
* flex-grow *(拿到的剩下空間)*
* flex-basis *(控制itme的主軸長度，會覆蓋掉 width)*
* flex-shrink *(收縮比，預設 1)*
* flex属性是flex-grow，flex-shrink和flex-basis的縮寫。

    flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

## 參考網頁
https://wcc723.github.io/css/2017/07/21/css-flex/

影片:
{%youtube _nCBQ6AIzDU %}

## 範例
https://jsfiddle.net/garylascy/t9na8qsy/12/