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