zfb
GitHub リポジトリ

検索したい単語を入力

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

フレックスコンテナ

フレックスコンテナの主軸方向と折り返しを設定します。

これらのユーティリティは flex コンテナに指定します。direction は主軸と項目の順序を決め、wrap は1行のままにするか次の行へ送るかを決めます。横並びには row、操作項目やカードの縦積みには column を使います。

クラスと CSS の早見表

クラスの例期待される宣言
flex-rowflex-direction: row;
flex-row-reverseflex-direction: row-reverse;
flex-colflex-direction: column;
flex-col-reverseflex-direction: column-reverse;
flex-wrapflex-wrap: wrap;
flex-nowrapflex-wrap: nowrap;
flex-wrap-reverseflex-wrap: wrap-reverse;
例の設定

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

使い方の例

主軸を選ぶ

row と column は項目を横軸と縦軸に並べます。reverse 形は DOM の順序を変えず、見た目の方向を逆にします。

主軸を選ぶ
HTML
<div class="wind-demo">
  <div class="wind-demo-note">Main axis changes with direction; reverse changes visual order.</div>
  <div class="wind-demo-frame flex flex-row gap-2">
    <div class="wind-demo-tile">A row</div><div class="wind-demo-tile">B</div><div class="wind-demo-tile">C</div>
  </div>
  <div class="wind-demo-frame flex flex-row-reverse gap-2">
    <div class="wind-demo-tile">A row-reverse</div><div class="wind-demo-tile">B</div><div class="wind-demo-tile">C</div>
  </div>
  <div class="wind-demo-frame flex flex-col gap-2">
    <div class="wind-demo-tile">A column</div><div class="wind-demo-tile">B</div>
  </div>
  <div class="wind-demo-frame flex flex-col-reverse gap-2">
    <div class="wind-demo-tile">A column-reverse</div><div class="wind-demo-tile">B</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-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-row {
  flex-direction: row;
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
.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-col",
        "flex-col-reverse",
        "flex-row",
        "flex-row-reverse",
        "gap-2"
      ]
    }
  }
}
デモ用の自作 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; }

項目を複数行にする

flex-wrap は折り返し、flex-nowrap は1行を保ち、flex-wrap-reverse は交差軸方向の行順を逆にします。

項目を複数行にする
HTML
<div class="wind-demo">
  <p class="wind-demo-note">The frame is narrow enough to make wrapping visible.</p>
  <div class="wind-demo-frame flex flex-wrap w-64 gap-2">
    <div class="wind-demo-tile w-24">wrap 1</div><div class="wind-demo-tile w-24">wrap 2</div><div class="wind-demo-tile w-24">wrap 3</div><div class="wind-demo-tile w-24">wrap 4</div>
  </div>
  <div class="wind-demo-frame flex flex-nowrap w-64 gap-2">
    <div class="wind-demo-tile w-24">nowrap 1</div><div class="wind-demo-tile w-24">nowrap 2</div><div class="wind-demo-tile w-24">nowrap 3</div>
  </div>
  <div class="wind-demo-frame flex flex-wrap-reverse w-64 gap-2">
    <div class="wind-demo-tile w-24">reverse 1</div><div class="wind-demo-tile w-24">reverse 2</div><div class="wind-demo-tile w-24">reverse 3</div><div class="wind-demo-tile w-24">reverse 4</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-nowrap {
  flex-wrap: nowrap;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}
.w-24 {
  width: 6rem;
}
.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-frame": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "flex",
        "flex-nowrap",
        "flex-wrap",
        "flex-wrap-reverse",
        "gap-2",
        "w-24",
        "w-64"
      ]
    }
  }
}
デモ用の自作 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; }

任意値と名前付きの値

7 個のクラス名は固定で、値の接尾辞はありません。flex-row と flex-col が方向を選び、reverse 形は見た目の順序を逆にします。flex-wrap、flex-nowrap、flex-wrap-reverse が折り返し方を決めます。これらは flex コンテナを作らないため、別途 display:flex が必要です。

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

カタログの詳細

flex-col

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

受け入れる値

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

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
flex-colflex-direction: column

flex-col-reverse

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

受け入れる値

種類接尾辞出力される値
exactnull"column-reverse"

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
flex-col-reverseflex-direction: column-reverse

flex-nowrap

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

受け入れる値

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

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
flex-nowrapflex-wrap: nowrap

flex-row

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

受け入れる値

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

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
flex-rowflex-direction: row

flex-row-reverse

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

受け入れる値

種類接尾辞出力される値
exactnull"row-reverse"

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
flex-row-reverseflex-direction: row-reverse

flex-wrap

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

受け入れる値

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

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
flex-wrapflex-wrap: wrap

flex-wrap-reverse

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

受け入れる値

種類接尾辞出力される値
exactnull"wrap-reverse"

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
flex-wrap-reverseflex-wrap: wrap-reverse

Revision History

作成更新