Flexbox & Grid
flex
用於控制彈性項目如何成長和收縮的實用工具。
| 類別 | 樣式 |
|---|---|
flex-<數字> | flex: <數字>; |
flex-<分數> | flex: calc(<分數> * 100%); |
flex-auto | flex: 1 1 auto; |
flex-initial | flex: 0 1 auto; |
flex-none | flex: none; |
範例
基本範例
使用 flex-<數字> 實用程式（例如 flex-1）來允許彈性項目根據需要成長和收縮，忽略其初始大小
01
02
03
<div class="flex"> <div class="w-14 flex-none ...">01</div> <div class="w-64 flex-1 ...">02</div> <div class="w-32 flex-1 ...">03</div></div>初始
使用 flex-initial 來允許彈性項目收縮但不成長，並考量其初始大小
01
02
03
<div class="flex"> <div class="w-14 flex-none ...">01</div> <div class="w-64 flex-initial ...">02</div> <div class="w-32 flex-initial ...">03</div></div>自動
使用 flex-auto 來允許彈性項目成長和收縮，並考量其初始大小
01
02
03
<div class="flex ..."> <div class="w-14 flex-none ...">01</div> <div class="w-64 flex-auto ...">02</div> <div class="w-32 flex-auto ...">03</div></div>無
使用 flex-none 來防止彈性項目成長或收縮
01
02
03
<div class="flex ..."> <div class="w-14 flex-none ...">01</div> <div class="w-32 flex-none ...">02</div> <div class="flex-1 ...">03</div></div>使用自訂值
使用 flex-[<值>] 語法 來設定彈性簡寫屬性基於完全自訂的值
<div class="flex-[3_1_auto] ..."> <!-- ... --></div>對於 CSS 變數，您也可以使用 flex-(<自訂屬性>) 語法
<div class="flex-(--my-flex) ..."> <!-- ... --></div>這只是 flex-[var(<自訂屬性>)] 的簡寫，它會自動為您新增 var() 函式。
響應式設計
前綴將 flex 實用程式 與斷點變體（例如 md:）加上前綴，以便僅在中 型螢幕尺寸及以上套用該實用程式
<div class="flex-none md:flex-1 ..."> <!-- ... --></div>請在變體文件中瞭解有關使用變體的更多資訊。
