flex-basis

例

spacingスケールの使用

basis-<number>ユーティリティ（basis-64、basis-128など）を使用して、spacingスケールに基づいてflexアイテムの初期サイズを設定します。

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

containerスケールの使用

basis-xsやbasis-smなどのユーティリティを使用して、containerスケールに基づいてflexアイテムの初期サイズを設定します。

<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など）を使用して、flexアイテムの初期サイズを設定します。

<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()関数を自動的に追加します。

レスポンシブデザイン

プレフィックスa flex-basis ユーティリティ md:のようなブレークポイントバリアントを使用すると、ユーティリティを適用するのはmedium 画面サイズ以上

<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>

The basis-<number> ユーティリティは--spacingテーマ変数によって駆動され、これもカスタマイズできます

@theme {
  --spacing: 1px; 
}

spacingスケールのカスタマイズの詳細については、以下をご覧ください。 テーマのドキュメント.