1. Directionが主軸を決定
rowは主軸を水平に、columnは垂直にします。これが変わると、justify-contentとalign-itemsの役割が入れ替わったように見えます。これは、これらが常に軸のロジックに従うためです。
Flexboxジェネレーター
一般的なパターンのプリセットを使用するか、各プロパティを直接調整します。入力値は、無効なCSSや表示エラーを防ぐため安全な範囲に制限されています。
選択中のアイテム
プレビュー内のアイテムをクリックして個別に編集できます。値はコード生成前に最適化されます。
0
1
0
1
ピクセル。0でコンテンツサイズに依存します。
このアイテムのみコンテナの整列設定を上書きします。
ライブプレビュー
下のコンテナは即座に更新されます。ラベルはどの軸が主軸かを示し、表示とCSSの対応を確認しやすくします。
主軸: 水平、交差軸: 垂直。
コピー用出力
CSSにはツールで設定されたプロパティのみが含まれます。HTMLにはセマンティックなクラス名が使用されており、プロジェクトに簡単に統合できます。
仕組みの解説
Flexboxは、Flexコンテナの直下の子要素を主軸と交差軸に沿って配置します。ここでは、混同しやすいポイントをわかりやすく解説します。
2. Wrappingによる行の制御
flex-wrapがnowrapの場合、align-contentは効果を持ちません。アイテムが複数行になり、それらの行の間に余白がある場合にのみ意味を持ちます。
3. アイテムの値による交渉
flex-growは余剰スペースの分配、flex-shrinkはアイテムの圧縮方法、flex-basisは計算の開始サイズを制御します。
注：生成されるベース値はピクセル単位、ギャップは整数ピクセルを使用します。プレビューはモダンブラウザの挙動を反映しています。
プロパティ・クイックリファレンス
レイアウトをテストした後の確認用として活用してください。
justify-content
主軸に沿ってアイテムを移動します。ナビゲーションバーや分散配置された行に最適です。
align-items
全アイテムの交差軸の整列を一度に制御します。カードの高さが不揃いな場合に使用します。
align-self
特定の1つのアイテムの交差軸整列を、他のアイテムに影響を与えずに上書きします。