Flexbox & Grid
flex-grow
用於控制彈性項目如何成長的工具程式。
| 類別 | 樣式 |
|---|---|
grow | flex-grow: 1; |
grow-<number> | flex-grow: <number>; |
grow-[<value>] | flex-grow: <value>; |
grow-(<custom-property>) | flex-grow: var(<custom-property>); |
範例
允許項目成長
使用 grow 讓彈性項目成長以填滿任何可用空間
01
02
03
<div class="flex ..."> <div class="size-14 flex-none ...">01</div> <div class="size-14 grow ...">02</div> <div class="size-14 flex-none ...">03</div></div>根據因子成長項目
使用 grow-<number> 工具程式，例如 grow-3，使彈性項目根據其成長因子按比例成長，使其相對於彼此填滿可用空間
01
02
03
<div class="flex ..."> <div class="size-14 grow-3 ...">01</div> <div class="size-14 grow-7 ...">02</div> <div class="size-14 grow-3 ...">03</div></div>防止項目成長
使用 grow-0 防止彈性項目成長
01
02
03
<div class="flex ..."> <div class="size-14 grow ...">01</div> <div class="size-14 grow-0 ...">02</div> <div class="size-14 grow ...">03</div></div>使用自訂值
使用 grow-[<value>] 語法 設定彈性成長因子基於完全自訂的值
<div class="grow-[25vw] ..."> <!-- ... --></div>對於 CSS 變數，您也可以使用 grow-(<custom-property>) 語法
<div class="grow-(--my-grow) ..."> <!-- ... --></div>這只是 grow-[var(<custom-property>)] 的簡寫，會自動為您新增 var() 函式。
響應式設計
前綴將 flex-grow 工具程式 加上一個斷點變體，例如 md:，以僅在中等 螢幕尺寸及以上套用該工具程式
<div class="grow md:grow-0 ..."> <!-- ... --></div>深入瞭解如何在變體文件中使用變體。
