Developer Layout Utility
Flexbox Playground
justify-content、align-items、flex-direction、flex-wrap、gap、align-content をリアルタイムで確認し、CSSコードをすぐに生成できるFlexboxレイアウトツールです。
Flexbox設定
Flexコンテナの方向、配置、折り返し、間隔、アイテムサイズを設定してください。
生成結果
現在のFlexbox設定をもとに生成されたCSSコードです。
Flexbox設定を変更してから、CSSコード生成ボタンをクリックしてください。
Flexbox配置方式の比較
Flexboxは方向と軸の概念を理解すると、ボタングループ、カード一覧、ナビゲーションレイアウトをすばやく作成できます。
メイン軸方向の配置を制御します。rowでは横方向、columnでは縦方向の配置を担当します。
交差軸方向の配置を制御します。アイテムを開始位置、中央、終了位置、またはstretchで配置できます。
flex-wrapによって複数行になった場合、行全体の交差軸方向の配置を制御します。
ヘルプ
Flexbox Playgroundとは？
Flexbox Playgroundは、Flexboxプロパティをリアルタイムで試しながらCSSコードを生成できる開発者向けレイアウトユーティリティです。
ボタングループ、ナビゲーション、カードリスト、タグ一覧、フォームレイアウト、管理画面UIの作成に活用できます。
対応機能
- flex-direction、justify-content、align-items の設定
- flex-wrap、align-content の設定
- gap、padding、item count の調整
- item width、item height、border-radius の調整
- よく使うFlexboxプリセットの適用
- リアルタイムプレビュー、CSSコードのコピー、ダウンロード
justify-contentとalign-itemsの違いは何ですか？
justify-contentはメイン軸の配置、align-itemsは交差軸の配置を制御します。flex-directionがrowかcolumnかによって、メイン軸と交差軸の方向が変わります。
align-contentはいつ適用されますか？
align-contentは、flex-wrapによって複数行が作られた場合に行全体を配置します。1行だけのFlexレイアウトでは、違いがほとんど見えない場合があります。
flex-wrapはいつ使いますか？
アイテム数が多い場合や画面幅が狭い場合、折り返しが必要ならflex-wrap: wrapを使います。タグ一覧、カードリスト、ボタングループでよく使われます。
FlexboxとCSS Gridはどう使い分けますか？
Flexboxは一方向の配置とアイテムの流れの制御に強く、CSS Gridは行と列を同時に設計する2次元レイアウトに適しています。
生成されたCSSをそのまま使えますか？
生成されたコードは基本的なFlexboxレイアウトCSSです。実際のプロジェクトに適用する際は、親要素の幅、レスポンシブのブレークポイント、アイテム内のコンテンツ量も確認してください。