# 20230513 display:flex

### flex-direction
1. row(為預設值):主軸從左到右，次軸從上到下

2. row-reserve:主軸從右到左，次軸從上到下

3. column:主軸由上到下，次軸由左到右

4. column-reverse:主軸由下到上，次軸由左到右

### flex-wrap
1. nowrap不自動換行(為預設值)
2. wrap自動換行
3. wrap-reverse換行，且次軸反轉
4. 

### flex-flow
flex-flow:<flex-direction><flex-wrap>;
例：flex:row wrap;

### 對齊方式
#### justift-content主軸整體對齊方式

| value | 說明 | 方向 | 圖例 |
| -------- | -------- | -------- | -------- |
| flex-start | 靠主軸起點|row||
|| |column||
| center | 靠主軸中央|row||
|| |column||
|flex-end| 靠主軸終點|row||
|| |column||
|space-between|主軸物件中間距離均分|row||
|| |column||
|space-around| 主軸起點.終點距離均分(起點與終點為物件間的一半距離)|row||
|| |column||
|space-evenly| 起點、終點與物件距離均分|row||
|| |column||

#### align-content 次軸整體對齊方式
* 有設定wrap才有用

| value | 說明 | 方向 | 圖例 |
| -------- | -------- | -------- | -------- |
| stretch | 次軸延伸|row||
|||column||
| center | 次軸置中|row||
| | |column||
| flex-start | 靠次軸起點|row||
| | |column||
| flex-end | 靠次軸終點|row||
| | |column||
| space-between | 次軸物件中間距離均分|row||
| | |column||
| space-around | 次軸起點與終點距離均分(起始與結束為物件間的一半距離)|row||
| | |column||
| space-evnely | 起始、結束與物件距離均分|row||
| | |column||

#### align-items
| value | 說明 | 方向 | 圖例 |
| -------- | -------- | -------- | -------- |
|strech|延伸|row||
|||column||
|center|置中|row||
|||column||
|flex-start|靠次軸起點|row||
|||column||
|flex-end|靠次軸終點|row||
|||column||
|baseline|基線(第一行的文字下緣)|row||
|||column||

#### align-self
| value | 說明 | 方向 | 圖例 |
| -------- | -------- | -------- | -------- |
|strech|延伸|row||
|||column||
|center|置中|row||
|||column||
|flex-start|靠次軸起點|row||
|||column||
|flex-end|靠次軸終點|row||
|||column||

### 物件排序 order
1.預設值為0
2.數字越小的排前面

### 物件彈性
#### flex-grow 剩餘空間比例
1.預設值為0
2.扣除掉所有物件的寬度後，將容器剩下寬度依此比例平分
3.例如



#### flex-shrink 不足空間壓縮比例
1.預設值為1，每個物件壓縮比例相同
2.例如


#### flex-basic 物件所佔尺寸
### flex 物件放大壓縮比例與大小
1.預設值為auto，有width的話以width為主，若未設定width則以符合內容的寬度為主
2.有設定flex-basis時，其優先度會大於width
3.auto v.s. 0範例
前提：容器寬度為600px，
flex: <flex-grow><flex-shrink><flex-basis>
可直接使用的keywords