# flex
## flex-direction　**←**　flex 主軸線方向

> ### 定義主軸的方向

- row(預設)　**←　左到右**
- row-reverse　**←　右到左**
- column　**←　上到下**
- column-reverse　**←　下到上**

## justify-content　**←**　決定內層容器對齊主軸方式

> ### 將flex元素和主軸對齊

- flex-start(預設)　**←**　**靠著主軸起點對齊**
- flex-end　**←**　**靠著主軸終點對齊**
- center　**←**　**左右留白，置中**
- space-around　**←**　**內層容器間留白較多，左右留白只有內層容器間留白的一半**
- space-evenly　**←**　**內層容器間及左右均等留白**
- space-between　**←**　**最左最右貼齊**

## flex-warp 　**←**　決定內層容器換行屬性

### 定義flex元素必須在單行或自動換行成多行

- nowarp(**預設**)
- wrap　**←**　 **換行**
- wrap-reverse 　**←**　**換行後反轉**

## align-items　←在交錯軸對齊多個元素

> ### 在交錯軸對齊多個元素

- flex-start　←　**依主軸由左至右時，靠上**
- flex-end　←　**依主軸由左至右時，靠下**
- center　←　**依主軸由左至右時，垂直置中上下相等距離**
- stretch(預設)　←　**依主軸由左至右時，滿版方式呈現**
- baseline　←　**無說明**

## align-self　←　在交叉軸上對齊一個元素，覆蓋align-items所設定的值

> ### 在交叉軸上對齊一個元素，覆蓋align-items所設定的值

- flex-start
- flex-end
- center
- baseline
- stretch

## oder　←　決定flex元素的順序
> ### 決定flex元素的順序

## flex-flow　←　flex-deraction和flex-wrap的縮寫

> ### flex-flow : flex-deraction屬性 + flex-wrap的屬性;

flex-flow : column wrap-reverse ;

## align-content　←　當交叉軸有多餘空間時，對齊容器內的軸線

> ### align-content ，只有在使用flex-wrap 時，才會有用。

- flex-start
- flex-end
- center
- space-between
- space-around
- space-evenly
- stretch