AZ Tools

CSS Flexbox プレイグラウンド

開発

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

—
flex-direction
flex-wrap
justify-content
align-items
プレビュー
1
2
3
4
5
CSS
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;
Tailwind
flex gap-[8px]

使い方

  1. 各プロパティのチップをクリックして値を設定。
  2. gap とアイテム数を調整して、よりリアルなプレビューを。
  3. プロジェクト用に CSS ルールや Tailwind クラスをコピー。

よくある質問

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] のような任意値を使います。

関連ツール

JWT デコーダー

JWT のヘッダー・クレーム・有効期限を即座に確認。

開発00

UUID ジェネレーター

ランダムなバージョン 4 UUID をまとめて生成し、コピー。

開発00

ハッシュ生成 (SHA)

テキストから SHA-1・SHA-256・SHA-384・SHA-512 ハッシュを生成。

開発00

URL エンコーダー / デコーダー

URL 用にテキストをパーセントエンコード、または URL をデコード。

開発00

Base64 エンコーダー / デコーダー

テキストを Base64 にエンコード、または Base64 をテキストにデコード。

開発00

JSON フォーマッター & バリデーター

ブラウザで JSON を整形・並べ替え・圧縮・検証できます。

開発00