---
tags: CSS, 六角筆記王
title: CSS - 跑版了嗎? 試著調整 flex-shrink / basis / grow
---

# CSS - flex-grow / shrink / basis
手刻版型或使用套件並修改 CSS 時，可能會遇到這個問題，明明已經設定了 `display: flex;`，為什麼內容被壓縮或者跑版了?

當我們將網頁元素設定成 `display: flex;`，這時會有這三個預設屬性 :
- `flex-grow`
- `flex-shrink`
- `flex-basis`
- 可以縮寫成 `flex: 1 0 200px;`，分別為上述三點由上至下

以下分別筆記它們會有怎樣的特性。

## flex-grow
> `flex-grow` 預設為 0，將剩餘空間平均分配。

範例設定容器寬為 500px，預設 box 為 100px，當元素被設定了 `flex-grow`，它會**將剩餘空間平均分配給該元素**。

- 情況一，當 box 元素加上 flex-grow-1 時
- 會將該元素設定為 `flex-grow: 1;`，意義為平均分配 1 等份
- 剩餘空間為 200px，平均分配 1 等份
- box 1 的寬度就會變成 100px + 200px = 300px
- 情況二，若在同層有多個元素都有被設定 flex-grow-1 時，範例有兩個元素被設定
- 剩餘空間為 200px，會變成平均分配 2 等份
- 被設定的元素寬度就會變成 100px + 100px = 200px

<iframe height="300" style="width: 100%;" scrolling="no" title="flex-grow" src="https://codepen.io/hsuan333/embed/KKmBRQL?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/hsuan333/pen/KKmBRQL">
flex-grow</a> by Vic (<a href="https://codepen.io/hsuan333">@hsuan333</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

---
## flex-shrink
> `flex-shrink` 預設為 1，超出範圍時，等比例壓縮

範例將 box 設定為寬度 200px，放在 500px 的容器裡，因為 `flex-shrink` 預設為 1，所以元素會被壓縮成約 166px，若都設定為 0，則會破版。

<iframe height="300" style="width: 100%;" scrolling="no" title="flex-shrink" src="https://codepen.io/hsuan333/embed/GRmBdQx?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/hsuan333/pen/GRmBdQx">
flex-shrink</a> by Vic (<a href="https://codepen.io/hsuan333">@hsuan333</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

---

會將這個 CSS 屬性寫成筆記，也是下面的例子，在有限的容器寬度中，加上 `display: flex;`，造成圖片被壓縮，所以將它設定為 0，就會恢復。
<iframe height="300" style="width: 100%;" scrolling="no" title="d-flex 被壓縮處理方式 - flex-shrink" src="https://codepen.io/hsuan333/embed/WNjyJeY?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/hsuan333/pen/WNjyJeY">
d-flex 被壓縮處理方式 - flex-shrink</a> by Vic (<a href="https://codepen.io/hsuan333">@hsuan333</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

---
## flex-basis
> flex-basis 預設為 auto，若有設定數值，則以此屬性為優先，覆蓋原有寬度。

範例容器一樣為 500px，box 2 設定為 `flex-basis: 300;`，這時 box 2 的寬度就會從原本的 100px 變為成 300px。

<iframe height="300" style="width: 100%;" scrolling="no" title="flex-grow" src="https://codepen.io/hsuan333/embed/ZEKjoxE?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/hsuan333/pen/ZEKjoxE">
flex-grow</a> by Vic (<a href="https://codepen.io/hsuan333">@hsuan333</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 參考來源
> 1. [Lai - Day24 Flex 空間分配 flex-grow / flex-shrink / flex-basis](https://ithelp.ithome.com.tw/articles/10208741)