CSS Flexbox ジェネレータ
CSS flexboxレイアウトを視覚的に構築します。コンテナとアイテムプロパティを設定し、ライブプレビューで生成されたCSSをコピーします。
Presets
12px
4
Live Preview
Click any item to edit its properties
Generated CSS
CSS Flexbox ジェネレータの使い方
- 1コンテナプロパティを設定：direction、justify、align、wrap、gap。
- 2ライブプレビューで子アイテムを追加または削除します。
- 3アイテムごとのflex-grow、shrink、basis、orderを設定します。
- 4プロジェクト用に生成されたCSSをコピーします。
Zenovayアナリティクス
関連ツール
CSSグラデーションジェネレータ
ビジュアルエディタで美しいCSSグラデーションを作成します。直線、放射状、円錐状のグラデーションに対応しています。CSSボックスシャドウジェネレーター
ビジュアルコントロールでCSSボックスシャドウを設計します。オフセット、ブラー、スプレッド、カラーを調整できます。CSSボーダーラディウスジェネレーター
カスタムボーダーラディウス値をビジュアルコントロールで作成します。コーナーをリンクまたはアンリンクして素早く調整できます。CSS Flexboxプレイグラウンド
CSS Flexboxレイアウトを視覚的に学習・生成できます。方向、配置、折り返し、ギャップをリアルタイムで調整できます。よくある質問
CSS Flexboxとは何ですか？▾
CSS Flexboxは、アイテムのサイズが不明な場合でも、コンテナ内のアイテム間のスペースを配分するレイアウトモデルです。一度に1つの軸（行または列）に沿って機能します。
flex-directionは何をしますか？▾
flex-directionはメインアクシスを設定します：row（左から右）、column（上から下）、row-reverse、またはcolumn-reverse。これはコンテナ内のアイテムの流れ方を決定します。
justify-contentとalign-itemsの違いは何ですか？▾
justify-contentはメインアクシス（flex-directionで設定）に沿ってアイテムを配置します。align-itemsはクロスアクシス（メインに垂直）に沿ってアイテムを配置します。
flex-grow、flex-shrink、flex-basisは何をしますか？▾
flex-growはアイテムが兄弟に対してどれだけ成長するかを制御します。flex-shrinkはどれだけ縮小するかを制御します。flex-basisは成長/縮小の前の初期サイズを設定します。
FlexboxとGridをどのような場合に使い分けますか？▾
1次元レイアウト（行または列のアイテム）にはFlexboxを使用します。2次元レイアウト（行と列を一緒に）にはGridを使用します。これらは組み合わせることができます。