---
# System prepended metadata

title: CSS flex

---

# CSS flex
## Flex 外容器屬性
- ### display:flex;
- ### flex-flow
  - #### flex-direction(文字方向)
    - column(上至下,左至右)
    - column-reverse(column相反)
    - row(左至右,上至下)
    - row-reverse (row相反)
  - #### flex-wrap(換行)
    - nowrap(單行)
    - wrap(換行)
    - wrap-reverse(換行,內容翻轉) 
- ### justify-content(水平對其) 
  - flex-end(對其最左邊)
  - flex-start(對其最右邊,預設)
  - center(置中)
  - space-between(移到兩旁)
  - space-around(間距平均)
- ### align-items(單個垂直對其)
  - flex-end(對其最下面)
  - flex-start(對其最上面)
  - center(置中)
  - stretch(內容撐開同flex-height)
  - baseline(對其基準線)
- ### align-content(多個垂直對其)
  - flex-end(對其最下面)
  - flex-start(對其最上面)
  - center(置中)
  - space-between(靠兩旁)
  - space-around(間距平均)
  - stretch(內容撐開同flex-height)
## Flex 內元件屬性
- ### flex(1.2.3)
  - 1.flex-grow(伸展比例分配)
  - 2.flex-shrink(壓縮比例分配)
  - 3.flex-basis(元件基準值)
- ### align-self(單個垂直對其>align-items)
  - flex-end(對其最下面)
  - flex-start(對其最上面)
  - center(置中)
  - stretch(撐開同flex-height)
  - baseline(對其基準線)
- ### order(排序)
  - (1234....) (指定交換對象)