flex-basis

範例

使用間距比例

使用 basis-<number> 實用程式，例如 basis-64 和 basis-128，根據間距比例設定彈性項目的初始尺寸

<div class="flex flex-row">  <div class="basis-64">01</div>  <div class="basis-64">02</div>  <div class="basis-128">03</div></div>

使用容器比例

使用 basis-xs 和 basis-sm 等實用程式，根據容器比例設定彈性項目的初始尺寸

<div class="flex flex-row">  <div class="basis-3xs">01</div>  <div class="basis-2xs">02</div>  <div class="basis-xs">03</div>  <div class="basis-sm">04</div></div>

使用百分比

使用 basis-<fraction> 工具類別，例如 basis-1/2 和 basis-2/3 來設定彈性項目的初始大小。

<div class="flex flex-row">  <div class="basis-1/3">01</div>  <div class="basis-2/3">02</div></div>

使用自訂數值

使用 basis-[<value>] 語法 來設定basis基於完全自訂的數值

<div class="basis-[30vw] ...">  <!-- ... --></div>

對於 CSS 變數，您也可以使用 basis-(<custom-property>) 語法

<div class="basis-(--my-basis) ...">  <!-- ... --></div>

這只是 basis-[var(<custom-property>)] 的簡寫，它會自動為您加入 var() 函式。

響應式設計

為一個 flex-basis 工具類別 加上一個斷點變體，例如 md:，以便僅在中型 螢幕尺寸及以上套用此工具類別。

<div class="flex flex-row">  <div class="basis-1/4 md:basis-1/3">01</div>  <div class="basis-1/4 md:basis-1/3">02</div>  <div class="basis-1/2 md:basis-1/3">03</div></div>

請在變體文件中了解更多關於使用變體的資訊。

自訂您的主題

使用 --container-* 主題變數來自訂固定寬度的 basis 工具類別在您的專案中

@theme {  --container-4xs: 14rem; }

現在 basis-4xs 工具類別可以在您的標記中使用。

<div class="basis-4xs">  <!-- ... --></div>

- basis-<number> 工具類別由 --spacing 主題變數驅動，您也可以自訂此變數。

@theme {  --spacing: 1px; }

請在 主題文件.