flex 彈性盒子排版
啟用
在使用 display: flex; 的情況下，flex-grow、flex-shrink 和 flex-basis 的預設值如下：
flex-grow的預設值是0，表示子元素不會根據剩餘空間進行放大。flex-shrink的預設值是1，表示子元素會根據需要收縮，以適應容器的空間。flex-basis的預設值是auto，表示元素的初始大小將根據其內容來決定。
這意味著在預設情況下，元素不會根據剩餘空間進行放大，但會根據需要收縮，並且其初始大小會根據內容自動調整。
TIP
預設情況：flex: 0 1 auto; 不會放大，但會壓縮，元素大小根據內容決定。 伸縮本 01auto
正常情況
將三個盒子放進 flex 中看看。
- box-container 包三個盒子，容器本身沒有設定寬高，尺寸根據包含的 box 元素自动调整。
- 第一行三個都很小，就不會站滿
- 第二行三個都很大，超出後會自動縮收在 box-container 範圍內。
盒子寬度：0
1.內部盒子 box 寬：0
1232.內部盒子 box 寬：0
123盒子 3 box 寬：0,0,0
123
溢出的情況
內容超出
- 高度不足
- margin 超出
- 內容文本超出
盒子 1 :容器高度不足
1
2
3
盒子 2 第一個子容器有自己的 margin，後面有 border/padding
1
2
3
盒子 3 [修正] 將 margin 換成 gap-5
1
2
3
盒子 4 : 父容器縮小 到 50px
1
2
3
盒子 5 : 父容器縮小 到 50px，內容文本超出，使得收縮異常。
danger
beautiful
word is over
盒子 6 同上
修正：將文本不換行及省略號處理，讓他不會超出盒子，但是需注意這種處理。
盒子 5 [修正]
danger
beautiful
word is over
盒子 6：同上 [修正]
TIP
將盒子的寬度收縮到比其內容寬度還小可能會導致內容被截斷或失真。
圖片
- 圖片溢出容器