CSS Flexboxプレイグラウンド

機能

コンテナのプロパティパネル

アイテムを追加・削除

アイテムごとに個別設定

レイアウトをリアルタイムでプレビュー

CSS コードを生成

使い方

1. コンテナのプロパティを調整します（direction, wrap, justify-content, align-items）。

2. フレックスアイテムを追加・削除します。

3. レイアウトがリアルタイムで更新されるのを確認し、CSSをコピーします。

このツールについて

Flexbox は要素を1本の軸――行または列――に沿って並べ、その間のスペースを分配します。難しいのはいくつかのプロパティが影響し合う点です。flex-direction が主軸を決め、justify-content が主軸方向の配置、align-items が交差軸方向の配置、flex-wrap が折り返すかどうか、gap が一定の間隔を決めます。このプレイグラウンドでは各プロパティを変えるとカラーボックスがすぐに並び替わるので、感覚をつかんだり、思いどおりにならないレイアウトを調べたりするのに最適です。アイテム数を変えて折り返しを試し、生成されたコンテナの CSS をコピーしてください。行と列の両方をそろえる2次元のレイアウトには、CSS Grid のほうが適していることが多いです。

よくある質問

justify-content と align-items の違いは？

justify-content は flex-direction で決まる主軸に沿ってアイテムを配置し、align-items は交差軸方向の位置を決めます。行方向では justify-content が横、align-items が縦を担当し、列方向では役割が入れ替わります。

justify-content が効かないように見えるのはなぜですか？

主軸に余白があるときだけ効果があります。flex: 1 や大きな幅の指定などでアイテムがすでにコンテナを埋めていると、分配するスペースがありません。

margin の代わりに gap を使うべきなのはどんなときですか？

gap はアイテム同士の間にだけ余白を追加し、外側の端には付けません。行にも折り返した行にも効きます。margin より簡単で予測しやすく、現在のすべてのブラウザーで flexbox に使えます。

flex-wrap で何が変わりますか？

nowrap ではアイテムは1行に収まり、必要なら縮みます。wrap ではスペースが足りなくなると次の行に移り、wrap-reverse ではその行が逆方向に積み重なります。

Flexbox と Grid はどちらを使うべきですか？

ナビゲーションバー、ボタンの並び、中央寄せなどの1次元の配置には Flexbox を、カードのギャラリーやページレイアウトなど行と列の両方をそろえたい場合には Grid を使います。

機能

使い方

このツールについて

よくある質問

関連ツール