---
# System prepended metadata

title: '20230513 display:flex'
tags: [前端課程筆記]

---

# 20230513 display:flex

### flex-direction
1. row(為預設值):主軸從左到右，次軸從上到下
![](https://hackmd.io/_uploads/H1OHdWRV3.png)

2. row-reserve:主軸從右到左，次軸從上到下
![](https://hackmd.io/_uploads/SyzuuZANh.png)

3. column:主軸由上到下，次軸由左到右
![](https://hackmd.io/_uploads/H1S79WA4n.png)

4. column-reverse:主軸由下到上，次軸由左到右
![](https://hackmd.io/_uploads/SyCVVzAEh.png)

### flex-wrap
1. nowrap不自動換行(為預設值)
2. wrap自動換行
![](https://hackmd.io/_uploads/ryWk9-R4h.png)
3. wrap-reverse換行，且次軸反轉
4. ![](https://hackmd.io/_uploads/HyZ8SfRV3.png)

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

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

| value | 說明 | 方向 | 圖例 |
| -------- | -------- | -------- | -------- |
| flex-start | 靠主軸起點|row|![](https://hackmd.io/_uploads/BJou5QCE3.png)|
|| |column|![](https://hackmd.io/_uploads/BJ5q9704h.png)|
| center | 靠主軸中央|row|![](https://hackmd.io/_uploads/ry4nc7AE2.png)|
|| |column|![](https://hackmd.io/_uploads/SyA6cXRE3.png)|
|flex-end| 靠主軸終點|row|![](https://hackmd.io/_uploads/S1y1s70N3.png)|
|| |column|![](https://hackmd.io/_uploads/B1glsQ0En.png)|
|space-between|主軸物件中間距離均分|row|![](https://hackmd.io/_uploads/ByCbsXANh.png)|
|| |column|![](https://hackmd.io/_uploads/B1pzsX04h.png)|
|space-around| 主軸起點.終點距離均分(起點與終點為物件間的一半距離)|row|![](https://hackmd.io/_uploads/H1Tmo70V2.png)|
|| |column|![](https://hackmd.io/_uploads/rk9Njm0Eh.png)|
|space-evenly| 起點、終點與物件距離均分|row|![](https://hackmd.io/_uploads/r1LBoQRE3.png)|
|| |column|![](https://hackmd.io/_uploads/rkxIjmAE3.png)|


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

| value | 說明 | 方向 | 圖例 |
| -------- | -------- | -------- | -------- |
| stretch | 次軸延伸|row|![](https://hackmd.io/_uploads/rJt1xERV3.png)|
|||column|![](https://hackmd.io/_uploads/ryUnJNANh.png)|
| center | 次軸置中|row|![](https://hackmd.io/_uploads/Bkz9eVRVh.png)|
| | |column|![](https://hackmd.io/_uploads/rJP6lNANn.png)|
| flex-start | 靠次軸起點|row|![](https://hackmd.io/_uploads/BkT--NCN2.png)|
| | |column|![](https://hackmd.io/_uploads/H19JW4CV3.png)|
| flex-end | 靠次軸終點|row|![](https://hackmd.io/_uploads/Hy_XZVC43.png)|
| | |column|![](https://hackmd.io/_uploads/BJFB-4RVh.png)|
| space-between | 次軸物件中間距離均分|row|![](https://hackmd.io/_uploads/SJQ2ZV0N3.png)|
| | |column|![](https://hackmd.io/_uploads/HJJ0WVCNh.png)|
| space-around | 次軸起點與終點距離均分(起始與結束為物件間的一半距離)|row|![](https://hackmd.io/_uploads/SyJszNC42.png)|
|  | |column|![](https://hackmd.io/_uploads/BJigM4CEh.png)|
| space-evnely | 起始、結束與物件距離均分|row|![](https://hackmd.io/_uploads/ByHXM4CN3.png)|
| | |column|![](https://hackmd.io/_uploads/ryGzGECEn.png)|
  
#### align-items
| value | 說明 | 方向 | 圖例 |
| -------- | -------- | -------- | -------- |
|strech|延伸|row|![](https://hackmd.io/_uploads/HyaIw4ANn.png)|
|||column|![](https://hackmd.io/_uploads/HyzoDE0Eh.png)|
|center|置中|row|![](https://hackmd.io/_uploads/Sy6W_VCEh.png)|
|||column|![](https://hackmd.io/_uploads/S1KBuN0Eh.png)|
|flex-start|靠次軸起點|row|![](https://hackmd.io/_uploads/HJBFu4RNh.png)|
|||column|![](https://hackmd.io/_uploads/HJOh_NR42.png)|
|flex-end|靠次軸終點|row|![](https://hackmd.io/_uploads/r1NmtNC43.png)|
|||column|![](https://hackmd.io/_uploads/B1-eFVR43.png)|
|baseline|基線(第一行的文字下緣)|row||
|||column||

#### align-self
| value | 說明 | 方向 | 圖例 |
| -------- | -------- | -------- | -------- |
|strech|延伸|row|![](https://hackmd.io/_uploads/rJ47lHCEn.png)|
|||column|![](https://hackmd.io/_uploads/rkQSWH04h.png)|
|center|置中|row|![](https://hackmd.io/_uploads/B1l6ZrAVh.png)|
|||column|![](https://hackmd.io/_uploads/H1VJGHCEn.png)|
|flex-start|靠次軸起點|row|![](https://hackmd.io/_uploads/H1rVtS0Nn.png)|
|||column|![](https://hackmd.io/_uploads/S1umFSAN2.png)|
|flex-end|靠次軸終點|row|![](https://hackmd.io/_uploads/r1uuYSRNn.png)|
|||column|![](https://hackmd.io/_uploads/BJ_PYrCE3.png)|
    
### 物件排序 order
1.預設值為0
2.數字越小的排前面
![](https://hackmd.io/_uploads/Hyw4qB0Vh.png)

### 物件彈性
#### flex-grow 剩餘空間比例
1.預設值為0
2.扣除掉所有物件的寬度後，將容器剩下寬度依此比例平分
3.例如
![](https://hackmd.io/_uploads/BJOqko1B3.png)
    
![](https://hackmd.io/_uploads/H1Z4gi1H2.png)
    
![](https://hackmd.io/_uploads/SyZJfsyB2.png)

#### flex-shrink 不足空間壓縮比例
1.預設值為1，每個物件壓縮比例相同
2.例如
![](https://hackmd.io/_uploads/Bk6A_jyrh.png)
    
![](https://hackmd.io/_uploads/rk7wcs1Bn.png)

#### 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

