📐 Flexboxプレイグラウンド

CSS Flexbox のプロパティをマウス操作で切り替えながら、実際のレイアウトをライブプレビュー。flex-direction・justify-content・align-items・gap などの効き方を目で確かめ、生成された CSS をそのままコピーできます。アイテムを追加して flex-grow や flex-basis の挙動も試せます。

コンテナ（親要素）の設定

flex-direction（主軸の向き）

flex-wrap（折り返し）

justify-content（主軸方向の配置）

align-items（交差軸方向の配置）

align-content（折り返し行の配置）

複数行に折り返したとき（wrap時）だけ効きます。

gap（アイテム間の余白 / px）

アイテム（子要素）

プレビュー内のアイテムをクリックすると選択でき、そのアイテム個別の flex 設定を編集できます。

ライブプレビュー

枠が「コンテナ（親）」、中の四角が「アイテム（子）」です。設定を変えると即座に並びが変わります。

生成された CSS

—

解説

Flexbox（Flexible Box Layout）は、親要素に display:flex を指定するだけで、子要素を1次元（横一列または縦一列）に並べて配置できる CSS のレイアウト方式です。「横に均等に並べたい」「縦中央に揃えたい」「余った幅を特定の要素に吸わせたい」といった調整を、フロートや位置指定を使わずに宣言的に書けます。本ツールは、その各プロパティをGUIで切り替えながら効き方を目で確認し、確定した設定をそのまま CSS として書き出すためのプレイグラウンドです。

Flexbox を理解する鍵は「主軸（main axis）」と「交差軸（cross axis）」の2本の軸です。flex-direction が row なら主軸は横（左右）、交差軸は縦（上下）になり、column にすると主軸と交差軸が入れ替わります。justify-content は主軸方向の詰め方（先頭寄せ・中央・両端揃えなど）、align-items は交差軸方向の揃え方（上寄せ・中央・引き伸ばしなど）を制御します。この2つを混同しないことが、思いどおりに配置する最短ルートです。

アイテム側のプロパティも重要です。flex-grow はコンテナに余った空間をどの比率で分け合うか（0なら伸びない）、flex-shrink は幅が足りないときにどの比率で縮むか、flex-basis は伸縮を始める前の基準サイズを表します。よく使う flex:1 は flex-grow:1; flex-shrink:1; flex-basis:0% の短縮形で、「余白をすべて等分に埋める」挙動になります。align-self を使えば、特定のアイテムだけコンテナの align-items を上書きできます。

折り返し（flex-wrap:wrap）を有効にすると、アイテムが1行に収まらないときに次の行へ回り込みます。このとき初めて align-content（複数行どうしの間隔）が効くようになります。gap はアイテム間の溝を一括指定でき、margin を個別に足すより見通しよく余白を管理できます。すべての処理はブラウザ内で完結し、入力内容が外部に送信されることはありません。生成された CSS はそのままプロジェクトへ貼り付けて利用できます。

よくある質問

主軸（main axis）と交差軸（cross axis）の違いは？

アイテムが並ぶ向きが主軸、それに直交する向きが交差軸です。flex-direction:row では主軸＝横・交差軸＝縦、column では主軸＝縦・交差軸＝横になります。justify-content は主軸方向、align-items は交差軸方向の配置を決めます。

justify-content と align-items はどう使い分ける？

「並んでいる方向（主軸）での詰め方」は justify-content、「並びに直交する方向（交差軸）での揃え方」は align-items です。横並び（row）で中央寄せにしたいとき、左右中央は justify-content:center、上下中央は align-items:center。両方 center にすると要素は枠のど真ん中に来ます。

flex-grow と flex-basis の関係は？

flex-basis は伸縮する前の「基準サイズ」、flex-grow は基準サイズを配ったあとに残った余白を分け合う比率です。まず各アイテムに basis 分の幅が割り当てられ、余った空間を grow の比率で分配します。flex-basis:0 にすると basis 由来の差が消え、grow の比率がそのまま最終的な幅の比率になります。

flex:1 と書くと何が起きますか？

flex:1 は flex-grow:1; flex-shrink:1; flex-basis:0% の短縮形です。すべての子に指定すると、基準サイズを0とみなして余白を1:1で分け合うため、幅が均等な列になります。片方だけ flex:2 にすれば2:1の比率になります。本ツールでも grow・shrink・basis を個別に設定してこの挙動を再現できます。

flex-wrap はどんなときに使う？

アイテムが1行に収まりきらないとき、はみ出させずに次の行へ折り返したい場合に flex-wrap:wrap を使います。カード一覧やタグ、レスポンシブなボタン群など、画面幅に応じて自然に段落ちさせたいUIで有効です。折り返しが起きて初めて align-content（行と行の間隔）が意味を持ちます。

align-content が効かないのはなぜ？

align-content は「複数行に折り返した行どうし」の配置を決めるプロパティなので、1行しかない状態（nowrap、または折り返しが発生していないwrap）では効果が現れません。本ツールで flex-wrap:wrap にしてアイテムを増やし、実際に折り返しを起こすと違いを確認できます。

gap と margin はどちらで余白を付けるべき？

アイテム間の均一な溝は gap が便利です。両端に余分な余白が付かず、行を折り返しても縦横の間隔を1行で指定できます。個別に片側だけ空けたい特別なケースでは margin を併用します。現在は主要ブラウザすべてが flex の gap に対応しています。

出力されたCSSのクラス名は変えられますか？

出力は .container・.item-1 …という汎用的なクラス名で生成しています。コピー後、エディタで自分のプロジェクトのクラス名に置き換えてご利用ください。プロパティの値はプレビューと完全に一致します。