📐 CSS Flexbox プレイグラウンド

インタラクティブなflexboxプレイグラウンド。コンテナとアイテムのプロパティを調整してフレックスレイアウトを確認——すべてブラウザ内で完結、瞬時に結果表示。

flex-direction

justify-content

align-items

flex-wrap

align-content

アイテム数：3

CSS コード

CSS Flexbox プレイグラウンドについて

このflexboxプレイグラウンドは、すべてブラウザ内で完結します。コンテナプロパティ（flex-direction、justify-content、align-items、flex-wrap、align-content）とアイテム数を調整して、フレックスレイアウトがリアルタイムでどう機能するかを確認できます。生成されたCSSコードをプロジェクトにコピーできます。

Flexboxプロパティの解説

flex-direction —— 主軸の方向を定義：row（左から右）、column（上から下）、またはそれぞれの逆。
justify-content —— 主軸に沿ってアイテムを配置。間隔と分布を制御。
align-items —— 交差軸に沿ってアイテムを配置。アイテムが垂直空間をどう埋めるかを制御。
flex-wrap —— アイテムが複数行に折り返すか、1行に留まるか。
align-content —— 交差軸に余裕がある場合、複数行コンテンツを配置。flex-wrapが有効な場合のみ適用。

プレイグラウンドの使い方

数値入力でflexアイテム数を設定します。
ドロップダウンを変更してflexboxプロパティを適用します。
プレイグラウンドがリアルタイムで更新されます。
CSSをコピーをクリックして生成されたコードをコピーします。

よくある質問

justify-contentとalign-itemsの違いは？ justify-contentは主軸（flex-directionで定義）に作用し、align-itemsは交差軸（主軸に垂直）に作用します。

align-contentが効かないのはなぜ？ align-contentはflex-wrapがwrapまたはwrap-reverseで、かつ複数行ある場合にのみ効果があります。

個別のアイテムをスタイルできますか？ このプレイグラウンドはコンテナプロパティに焦点を当てています。独自のコードでは、個別のアイテムにflex-grow、flex-shrink、flex-basisを設定できます。