zfb
GitHub リポジトリ

検索したい単語を入力

いつでも検索バーを開ける

フレックス項目

項目の伸長、収縮、簡略指定のサイズ動作を設定します。

コンテナに余りや不足があるときの flex item のサイズ挙動を指定します。flex のプリセットは basis、grow、shrink の組み合わせを選び、grow と shrink はそれぞれの比率を個別に指定します。

クラスと CSS の早見表

クラスの例期待される宣言
flex-1flex: 1 1 0%;
flex-autoflex: 1 1 auto;
flex-initialflex: 0 1 auto;
flex-noneflex: none;
growflex-grow: 1;
grow-0flex-grow: 0;
grow-[2]flex-grow: 2;
shrinkflex-shrink: 1;
shrink-0flex-shrink: 0;
shrink-[2]flex-shrink: 2;
basis-autoflex-basis: auto;
basis-1/2flex-basis: calc(100% * 1 / 2);
order-firstorder: -9999;
order-lastorder: 9999;
例の設定

すべてのプレビューは spec 1、reset "none"、strict モード、spacingUnit "0.25rem"、ブレークポイントなしを明示した設定から始まります。数値の spacing はこの単位を掛けて解決し、Tailwind のテーマは継承しません。wind-demo クラスはデモ用の自作スタイルで、HTML と一緒に CSS を確認できます。

使い方の例

flex のプリセットを比較

4つのプリセットは flex-basis、flex-grow、flex-shrink の値が異なるため、行の空間を別々に分配します。

flex のプリセットを比較
HTML
<div class="wind-demo">
  <div class="wind-demo-note">Compare how each item uses its base size and available space.</div>
  <div class="wind-demo-frame flex w-72 gap-2">
    <div class="wind-demo-tile flex-1 w-16">flex-1</div>
    <div class="wind-demo-tile flex-auto w-16">flex-auto</div>
    <div class="wind-demo-tile flex-initial w-16">flex-initial</div>
    <div class="wind-demo-tile flex-none w-16">flex-none</div>
  </div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.flex {
  display: flex;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-auto {
  flex: 1 1 auto;
}
.flex-initial {
  flex: 0 1 auto;
}
.flex-none {
  flex: none;
}
.w-16 {
  width: 4rem;
}
.w-72 {
  width: 18rem;
}
.gap-2 {
  column-gap: 0.5rem;
  row-gap: 0.5rem;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "flex",
        "flex-1",
        "flex-auto",
        "flex-initial",
        "flex-none",
        "gap-2",
        "w-16",
        "w-72"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

余った幅を分ける

grow は比率1で広がり、grow-0 は固定項目を広げません。grow-[2] は grow の2倍の余り幅を受け取ります。

余った幅を分ける
HTML
<div class="wind-demo">
  <p class="wind-demo-note">Extra space is split according to grow factors.</p>
  <div class="wind-demo-frame flex w-72 gap-2">
    <div class="wind-demo-tile grow">grow 1</div>
    <div class="wind-demo-tile grow-0 w-16">grow-0</div>
    <div class="wind-demo-tile grow-[2]">grow-[2]</div>
  </div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.flex {
  display: flex;
}
.grow {
  flex-grow: 1;
}
.grow-0 {
  flex-grow: 0;
}
.grow-\[2\] {
  flex-grow: 2;
}
.w-16 {
  width: 4rem;
}
.w-72 {
  width: 18rem;
}
.gap-2 {
  column-gap: 0.5rem;
  row-gap: 0.5rem;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "flex",
        "gap-2",
        "grow",
        "grow-0",
        "grow-[2]",
        "w-16",
        "w-72"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

縮み方を制御

shrink の項目は初期幅より縮み、shrink-0 は幅を保ちます。比率2の最後の項目は不足分をより多く引き受けます。

縮み方を制御
HTML
<div class="wind-demo">
  <p class="wind-demo-note">These starting widths are wider than the row.</p>
  <div class="wind-demo-frame flex w-64 gap-2">
    <div class="wind-demo-tile shrink w-48">shrink</div>
    <div class="wind-demo-tile shrink-0 w-48 wind-demo-alt">shrink-0 keeps its width</div>
    <div class="wind-demo-tile shrink-[2] w-48">shrink-[2]</div>
  </div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-alt {
  border-color: #b39761;
  background: #efe5cb;
  color: #483a1d;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.flex {
  display: flex;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.shrink-\[2\] {
  flex-shrink: 2;
}
.w-48 {
  width: 12rem;
}
.w-64 {
  width: 16rem;
}
.gap-2 {
  column-gap: 0.5rem;
  row-gap: 0.5rem;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-alt": true,
      "wind-demo-frame": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "flex",
        "gap-2",
        "shrink",
        "shrink-0",
        "shrink-[2]",
        "w-48",
        "w-64"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-alt { border-color: #b39761; background: #efe5cb; color: #483a1d; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

basis と order

basis-and-order は対応済みの Wind ユーティリティクラスを使います。

basis と order
HTML
<div class="wind-demo-new flex"><span class="basis-auto order-first">first</span><span class="basis-1/2 order-last">last</span></div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-new {
  color: #203046;
  font: 14px / 1.5 system-ui, sans-serif;
}
.flex {
  display: flex;
}
.basis-1\/2 {
  flex-basis: calc(100% * 1 / 2);
}
.basis-auto {
  flex-basis: auto;
}
.order-first {
  order: -9999;
}
.order-last {
  order: 9999;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-new": true
    },
    "safelist": {
      "docs-preview": [
        "flex",
        "basis-auto",
        "basis-1/2",
        "order-first",
        "order-last"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-new { color: #203046; font: 14px/1.5 system-ui, sans-serif; }

任意値と名前付きの値

flex-1 は 1 1 0%、flex-auto は 1 1 auto、flex-initial は 0 1 auto、flex-none は none です。grow と shrink の既定値は1で、-0 形は0です。grow-[2] のような任意の数値も使えます。比率の効果を見るには親に display:flex を設定します。

関連ガイド: ユーティリティの文法 · バリアント

カタログの詳細

flex-1

フィールド値
カタログ識別子v1.flex-1
クラスパターンflex-1
文法{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位flex-item (5)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティflex

受け入れる値

種類接尾辞出力される値
exactnull"1 1 0%"

宣言テンプレート

プロパティ値の種類固定値
flexresolvednull

カタログの例

クラスの例期待される宣言
flex-1flex: 1 1 0%

flex-auto

フィールド値
カタログ識別子v1.flex-auto
クラスパターンflex-auto
文法{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位flex-item (5)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティflex

受け入れる値

種類接尾辞出力される値
exactnull"1 1 auto"

宣言テンプレート

プロパティ値の種類固定値
flexresolvednull

カタログの例

クラスの例期待される宣言
flex-autoflex: 1 1 auto

flex-initial

フィールド値
カタログ識別子v1.flex-initial
クラスパターンflex-initial
文法{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位flex-item (5)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティflex

受け入れる値

種類接尾辞出力される値
exactnull"0 1 auto"

宣言テンプレート

プロパティ値の種類固定値
flexresolvednull

カタログの例

クラスの例期待される宣言
flex-initialflex: 0 1 auto

flex-none

フィールド値
カタログ識別子v1.flex-none
クラスパターンflex-none
文法{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位flex-item (5)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティflex

受け入れる値

種類接尾辞出力される値
exactnull"none"

宣言テンプレート

プロパティ値の種類固定値
flexresolvednull

カタログの例

クラスの例期待される宣言
flex-noneflex: none

grow

フィールド値
カタログ識別子v1.grow
クラスパターンgrow or grow-<suffix>
文法{"acceptedKinds":["keyword","arbitrary"],"arbitraryProperty":"flex-grow","allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値2
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位flex-item (5)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティflex-grow

受け入れる値

種類接尾辞出力される値
keywordnull"1"
keyword"0""0"

宣言テンプレート

プロパティ値の種類固定値
flex-growresolvednull

カタログの例

クラスの例期待される宣言
growflex-grow: 1

shrink

フィールド値
カタログ識別子v1.shrink
クラスパターンshrink or shrink-<suffix>
文法{"acceptedKinds":["keyword","arbitrary"],"arbitraryProperty":"flex-shrink","allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値2
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位flex-item (5)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティflex-shrink

受け入れる値

種類接尾辞出力される値
keywordnull"1"
keyword"0""0"

宣言テンプレート

プロパティ値の種類固定値
flex-shrinkresolvednull

カタログの例

クラスの例期待される宣言
shrinkflex-shrink: 1

basis

フィールド値
カタログ識別子v1.basis
クラスパターンbasis-<suffix>
文法{"acceptedKinds":["keyword","fraction"],"arbitraryProperty":null,"allowsFractionSlash":true,"allowsColorOpacity":false}
受け入れる値8
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位flex-item (5)
並び順の順位1
セレクタの形ownElement
仕様バージョン1
出力するプロパティflex-basis

受け入れる値

種類接尾辞出力される値
keyword"auto""auto"
keyword"full""100%"
keyword"px""1px"
keyword"0""0"
keyword"min""min-content"
keyword"max""max-content"
keyword"fit""fit-content"
keyword"content""content"

宣言テンプレート

プロパティ値の種類固定値
flex-basisresolvednull

カタログの例

クラスの例期待される宣言
basis-autoflex-basis: auto

order

フィールド値
カタログ識別子v1.order
クラスパターンorder-<suffix>
文法{"acceptedKinds":["keyword","integer"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値3
トークンカテゴリトークンカテゴリなし
負の値の規則allowed
競合グループと順位flex-item (5)
並び順の順位2
セレクタの形ownElement
仕様バージョン1
出力するプロパティorder

受け入れる値

種類接尾辞出力される値
keyword"first""-9999"
keyword"last""9999"
keyword"none""0"

宣言テンプレート

プロパティ値の種類固定値
orderresolvednull

カタログの例

クラスの例期待される宣言
order-firstorder: -9999

Revision History

作成更新