zfb
GitHub リポジトリ

検索したい単語を入力

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

整列

対応する軸に沿って項目、個別の項目、グリッド内容を整列します。

flex または grid コンテナで子要素の位置を調整します。items は flex の交差軸と grid の block 軸を整列し、justify は flex レイアウトの主軸、place-items は grid item の両軸を扱います。self は個別の項目を上書きします。

クラスと CSS の早見表

クラスの例期待される宣言
items-centeralign-items: center;
justify-betweenjustify-content: space-between;
self-endalign-self: flex-end;
place-items-centerplace-items: center;
justify-items-centerjustify-items: center;
justify-self-endjustify-self: end;
place-content-betweenplace-content: space-between;
place-self-startplace-self: start;
self-startalign-self: flex-start;
例の設定

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

使い方の例

flex の行を整列

justify-between は行の主軸に項目を分配し、items-center は交差軸を中央にそろえます。self-end は子要素1つだけを交差軸の端に配置します。

flex の行を整列
HTML
<div class="wind-demo">
  <p class="wind-demo-note">On a row, justify-content moves along the main axis and align-items moves across it.</p>
  <div class="wind-demo-frame flex h-32 w-full items-center justify-between gap-2">
    <div class="wind-demo-tile">Start</div><div class="wind-demo-tile self-end">Self end</div><div class="wind-demo-tile">End</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;
}
.items-center {
  align-items: center;
}
.justify-between {
  justify-content: space-between;
}
.self-end {
  align-self: flex-end;
}
.h-32 {
  height: 8rem;
}
.w-full {
  width: 100%;
}
.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",
        "h-32",
        "items-center",
        "justify-between",
        "self-end",
        "w-full"
      ]
    }
  }
}
デモ用の自作 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; }

grid item を両軸で整列

place-items-center は grid item を中央に置き、justify-items-center は inline 軸を整列し、place-content-between はトラックを分配します。別々のタイルで justify-self-end、place-self-start、self-start を示します。

grid item を両軸で整列
HTML
<div class="wind-demo">
  <p class="wind-demo-note">place-items sets both axes for each grid item; self overrides one item.</p>
  <div class="wind-demo-frame grid grid-cols-2 grid-rows-2 h-36 place-items-center justify-items-center place-content-between gap-2">
    <div class="wind-demo-tile justify-self-end">Justify self end</div><div class="wind-demo-tile place-self-start">Place self start</div>
    <div class="wind-demo-tile self-start">Self start</div><div class="wind-demo-tile">Centered</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;
}
.grid {
  display: grid;
}
.grid-cols-2 {
  grid-template-columns: repeat(2,minmax(0,1fr));
}
.grid-rows-2 {
  grid-template-rows: repeat(2,minmax(0,1fr));
}
.justify-items-center {
  justify-items: center;
}
.justify-self-end {
  justify-self: end;
}
.place-content-between {
  place-content: space-between;
}
.place-items-center {
  place-items: center;
}
.place-self-start {
  place-self: start;
}
.self-start {
  align-self: flex-start;
}
.h-36 {
  height: 9rem;
}
.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": [
        "gap-2",
        "grid",
        "grid-cols-2",
        "grid-rows-2",
        "h-36",
        "justify-items-center",
        "justify-self-end",
        "place-content-between",
        "place-items-center",
        "place-self-start",
        "self-start"
      ]
    }
  }
}
デモ用の自作 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; }

任意値と名前付きの値

各基部は固定キーワードを受け付けます。新しい justify-self、justify-items、place-self は start、end、center、stretch、baseline を使います。place-content は start、end、center、stretch、between（space-between）、around（space-around）、evenly（space-evenly）を使います。place-self は align-self と justify-self、place-content は align-content と justify-content を設定します。既存の place-items は変わりません。新しい基部では flex-start／flex-end をユーティリティの接尾辞として使えませんが、CSS 一般では有効で、既存の items、self、justify の出力も変わりません。

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

カタログの詳細

items

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

受け入れる値

種類接尾辞出力される値
keyword"start""flex-start"
keyword"end""flex-end"
keyword"center""center"
keyword"baseline""baseline"
keyword"stretch""stretch"

宣言テンプレート

プロパティ値の種類固定値
align-itemsresolvednull

カタログの例

クラスの例期待される宣言
items-centeralign-items: center

justify

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

受け入れる値

種類接尾辞出力される値
keyword"start""flex-start"
keyword"end""flex-end"
keyword"center""center"
keyword"between""space-between"
keyword"around""space-around"
keyword"evenly""space-evenly"

宣言テンプレート

プロパティ値の種類固定値
justify-contentresolvednull

カタログの例

クラスの例期待される宣言
justify-centerjustify-content: center

justify-items

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

受け入れる値

種類接尾辞出力される値
keyword"start""start"
keyword"end""end"
keyword"center""center"
keyword"stretch""stretch"
keyword"baseline""baseline"

宣言テンプレート

プロパティ値の種類固定値
justify-itemsresolvednull

カタログの例

クラスの例期待される宣言
justify-items-centerjustify-items: center

justify-self

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

受け入れる値

種類接尾辞出力される値
keyword"start""start"
keyword"end""end"
keyword"center""center"
keyword"stretch""stretch"
keyword"baseline""baseline"

宣言テンプレート

プロパティ値の種類固定値
justify-selfresolvednull

カタログの例

クラスの例期待される宣言
justify-self-centerjustify-self: center

place-content

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

受け入れる値

種類接尾辞出力される値
keyword"start""start"
keyword"end""end"
keyword"center""center"
keyword"stretch""stretch"
keyword"between""space-between"
keyword"around""space-around"
keyword"evenly""space-evenly"

宣言テンプレート

プロパティ値の種類固定値
place-contentresolvednull

カタログの例

クラスの例期待される宣言
place-content-centerplace-content: center

place-items

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

受け入れる値

種類接尾辞出力される値
keyword"start""start"
keyword"end""end"
keyword"center""center"
keyword"stretch""stretch"

宣言テンプレート

プロパティ値の種類固定値
place-itemsresolvednull

カタログの例

クラスの例期待される宣言
place-items-centerplace-items: center

place-self

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

受け入れる値

種類接尾辞出力される値
keyword"start""start"
keyword"end""end"
keyword"center""center"
keyword"stretch""stretch"
keyword"baseline""baseline"

宣言テンプレート

プロパティ値の種類固定値
place-selfresolvednull

カタログの例

クラスの例期待される宣言
place-self-centerplace-self: center

self

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

受け入れる値

種類接尾辞出力される値
keyword"start""flex-start"
keyword"end""flex-end"
keyword"center""center"
keyword"baseline""baseline"
keyword"stretch""stretch"

宣言テンプレート

プロパティ値の種類固定値
align-selfresolvednull

カタログの例

クラスの例期待される宣言
self-centeralign-self: center

Revision History

作成更新