Developer Tools
Web UtilitiesCSS Flexbox プレイグラウンド
CSS flexbox コンテナとアイテムのプロパティをリアルタイムプレビューで視覚的に設定。flex-direction、justify-content、align-items などすぐに使えるCSSコードを生成。
プリセット
コンテナプロパティ
アイテムプロパティ
ライブプレビュー
1
2
3
コンテナCSS
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 8px;
}アイテムCSS
.flex-item-1 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
.flex-item-2 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
.flex-item-3 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}関連ツール
CSS Flexbox プレイグラウンドについて
使い方
- flex-direction、flex-wrap、justify-content、align-items、align-content などのコンテナプロパティを調整
- 最大6つの flex アイテムを追加し、flex-grow、flex-shrink、flex-basis、align-self、order で各アイテムを独立して設定
- プロパティを変更するたびにリアルタイムでレイアウトをプレビュー
- 生成されたコンテナとアイテムのCSSコードを直接プロジェクトにコピー
- プリセットを使って一般的な flexbox パターンを素早く探索
主な使用例
- flexbox レイアウトプロパティをインタラクティブに学習
- ナビゲーションバー、カードグリッド、サイドバーのプロトタイプ作成
- 複雑な flexbox 配置問題のデバッグ
- 一般的なレイアウトパターン用の基本CSSの生成
- 学生への CSS flexbox 概念の指導
よくある質問
CSS Flexbox プレイグラウンドとは何ですか？
CSS Flexbox プレイグラウンドは、すべての flexbox コンテナとアイテムのプロパティを視覚的に設定できるインタラクティブツールです。変更はリアルタイムプレビューに即座に反映され、すぐに使えるCSSコードが自動生成されます。
どのコンテナプロパティを設定できますか？
6つの主要な flex コンテナプロパティを設定できます：flex-direction（row、row-reverse、column、column-reverse）、flex-wrap（nowrap、wrap、wrap-reverse）、justify-content（flex-start、flex-end、center、space-between、space-around、space-evenly）、align-items（stretch、flex-start、flex-end、center、baseline）、align-content（stretch、flex-start、flex-end、center、space-between、space-around）、gap（ピクセル値）。
各 flex アイテムでどのプロパティを設定できますか？
各 flex アイテムは次のプロパティで設定できます：flex-grow（アイテムが取る余分なスペースの量）、flex-shrink（スペースが足りないときの縮小量）、flex-basis（初期サイズ）、align-self（個別の配置オーバーライド）、order（コンテナ内の表示順序）。
flex アイテムはいくつ追加できますか？
最大6つの flex アイテムを追加できます。「+ アイテム追加」ボタンをクリックしてさらに追加してください。各アイテムは色分けされており、プレビューや設定パネルで簡単に識別できます。
特定の flex アイテムを選択・編集するにはどうすればよいですか？
アイテムプロパティパネル上部の番号付きタブをクリックして選択します。ライブプレビューのアイテムを直接クリックすることもできます。選択されたアイテムはカラーボーダーでハイライトされます。
プリセットとは何ですか？使い方は？
プリセットは一般的なレイアウトパターン用の既成 flexbox 設定です：「中央揃え行」は水平・垂直にアイテムを中央揃え、「中央揃え列」は垂直にスタックして中央揃え、「間隔均等」はアイテムを均等配置、「折り返しグリッド」は flex-wrap を使用、「伸張アイテム」は flex-grow を使用、「逆順行」は表示順序を逆にします。クリックで即座に適用できます。
flex-grow は何をしますか？
flex-grow は、コンテナに余分なスペースがある場合、flex アイテムが他のアイテムに対してどれだけ成長するかを定義します。0 はアイテムが成長しないことを意味します。1 は余分なスペースを等分することを意味します。2 は flex-grow: 1 のアイテムの2倍のスペースを意味します。
flex-shrink は何をしますか？
flex-shrink は、コンテナのスペースが不足している場合、flex アイテムが他のアイテムに対してどれだけ縮小するかを定義します。0 は縮小を防ぎます。1（デフォルト）は比例縮小を意味します。2 は2倍速で縮小することを意味します。
flex-basis はどんな値を受け付けますか？
flex-basis は、空きスペースを配分する前の flex アイテムの初期サイズを設定します。受け付ける値：'auto'（アイテムの幅または高さを使用）、'100px' や '20%' などの長さの値、'content'（コンテンツに基づく）、または '0'（ゼロサイズから開始）。
align-items と align-self の違いは何ですか？
align-items はデフォルトですべての flex アイテムに適用されるコンテナプロパティです。align-self は個別のアイテムに対して align-items を上書きします。例えば、コンテナに align-items: center があっても、一つのアイテムに align-self: flex-end があれば、そのアイテム以外はすべて中央揃えになります。
order プロパティは何をしますか？
order プロパティは DOM の順序を変更せずに flex アイテムの視覚的な順序を制御します。order 値が小さいアイテムが先に表示されます。デフォルト値は 0 です。
生成されたCSSをコピーするにはどうすればよいですか？
コピーボタンが2つあります：コンテナCSS用と全CSS用です。いずれかの「CSS をコピー」ボタンをクリックしてコードをクリップボードにコピーしてください。