flex-shrink

例

Flexアイテムを縮小させる

必要に応じてFlexアイテムを縮小させるには、shrinkを使用します。

<div class="flex ...">
  <div class="h-14 w-14 flex-none ...">01</div>
  <div class="h-14 w-64 shrink ...">02</div>
  <div class="h-14 w-14 flex-none ...">03</div>
</div>

アイテムが縮小するのを防ぐ

Flexアイテムが縮小するのを防ぐには、shrink-0を使用します。

<div class="flex ...">
  <div class="h-16 flex-1 ...">01</div>
  <div class="h-16 w-32 shrink-0 ...">02</div>
  <div class="h-16 flex-1 ...">03</div>
</div>

カスタム値の使用

以下を使用： shrink-[<value>] 構文 を設定するには：flex縮小率完全にカスタムの値に基づいて

<div class="shrink-[calc(100vw-var(--sidebar))] ...">
  <!-- ... -->
</div>

CSS変数には、以下も使用できます： shrink-(<custom-property>) 構文

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

これは単なるショートハンドです： shrink-[var(<custom-property>)] var()関数を自動的に追加します。

レスポンシブデザイン

プレフィックスa flex-shrinkユーティリティ md:のようなブレークポイントバリアントを付けて、ユーティリティを適用する範囲をmedium 以上の画面サイズに限定します。

<div class="shrink md:shrink-0 ...">
  <!-- ... -->
</div>

バリアントの使用方法の詳細については、バリアントのドキュメントをご覧ください。