FlexBox自動縮放 - daniel-qa/Vue GitHub Wiki
| 屬性名稱 | 中文名稱 | 作用方向 | 預設值 | 可用值 | 詳細說明 |
|---|---|---|---|---|---|
flex-grow |
放大因子 | 控制「放大」 | 0 |
任意非負數（0, 1, 2, ...） |
當父容器有剩餘空間時，決定該項目可分配多少比例的空間。例如 flex-grow: 2 表示這個元素會比 flex-grow: 1 的元素多佔兩倍的剩餘空間。 |
flex-shrink |
縮小因子 | 控制「縮小」 | 1 |
任意非負數（0, 1, 2, ...） |
當父容器的空間不足時，決定該項目要縮得多快。0 代表完全不縮；2 代表縮的速度是 1 的兩倍。 |
flex-basis |
起始大小 | 控制「初始長度」 | auto |
auto、0、或任何長度（如 100px, 50%） |
在分配伸縮空間之前，用來決定項目的「起始寬度」。auto 代表依內容或寬度屬性決定。 |
flex |
綜合簡寫 | 綜合設定 | 0 1 auto |
三者組合：flex: grow shrink basis; |
常見簡寫如下：flex: 1 → 1 1 0%（平均分配剩餘空間）flex: auto → 1 1 auto（可伸可縮，依內容初始）flex: none → 0 0 auto（固定大小，不伸不縮） |