justify-content と align-items の違い？

justify-content は主軸（コンテナの流れ方向）の整列、align-items は交差軸の整列。方向を column にすると視覚的に役割が入れ替わるのが分かります。

align-items: stretch がアイテムを満たすのはなぜ？

stretch が既定。交差軸に明示サイズがないアイテムを利用可能スペースまで広げます。別の値にするとコンテンツサイズに縮みます。

アイテムが 1 行に収まらないとき。wrap で次の行に、nowrap（既定）では縮むかコンテナからはみ出します。

ほとんどの flex プロパティは専用クラス（flex, justify-center, items-center, gap-2）がありますが、8px・12px など独自値の gap は gap-[8px] のような任意値を使います。

Flex の各プロパティをタイピングなしでクリックだけで調整。プレビューが即座に更新され、各値の意味が視覚的に分かります。出力欄には CSS ルールと等価な Tailwind ユーティリティクラスの両方が表示。学習・レイアウトデバッグ・適切な組み合わせをプロジェクトに貼り付ける際に便利。

—

flex-direction

flex-wrap

justify-content

align-items

gap (px)アイテム数

プレビュー

CSS

display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;

Tailwind

flex gap-[8px]

justify-content と align-items の違い？: justify-content は主軸（コンテナの流れ方向）の整列、align-items は交差軸の整列。方向を column にすると視覚的に役割が入れ替わるのが分かります。
align-items: stretch がアイテムを満たすのはなぜ？: stretch が既定。交差軸に明示サイズがないアイテムを利用可能スペースまで広げます。別の値にするとコンテンツサイズに縮みます。
flex-wrap が効くのは？: アイテムが 1 行に収まらないとき。wrap で次の行に、nowrap（既定）では縮むかコンテナからはみ出します。
なぜ Tailwind クラスが任意値？: ほとんどの flex プロパティは専用クラス（flex, justify-center, items-center, gap-2）がありますが、8px・12px など独自値の gap は gap-[8px] のような任意値を使います。