---
# System prepended metadata

title: CSS Flex 筆記
tags: [front end]

---

# 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
     ```typescript=css
    (-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的縮寫。
    ```typescript=css
    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/