Flexboxエディター
無料オンライン Flexbox レイアウトエディター、ビジュアルリアルタイムプレビュー
Flexboxプロパティリファレンス
flex-direction: row | column | row-reverse | column-reverse。justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly。align-items: stretch | flex-start | center | flex-end | baseline。flex-wrap: nowrap | wrap。gap: アイテム間の間隔。
Flexboxエディターの使い方
コントロールでflexコンテナのプロパティを調整します。プレビューでアイテムの配置がリアルタイムに表示されます。アイテムを追加・削除して異なる設定をテストします。生成されたCSSをプロジェクトにコピーできます。
▶justify-contentとalign-itemsの違いは？
justify-contentは主軸に沿った配置を制御します（行方向なら水平、列方向なら垂直）。align-itemsは交差軸に沿った配置を制御します（主軸に垂直）。
▶Flexboxで要素を中央揃えにするには？
親要素にdisplay: flex; justify-content: center; align-items: center;を設定すると、子要素が水平・垂直方向に中央揃えされます。
▶flex-wrapの役割は？
デフォルトではflexアイテムは1行に収めようとします（nowrap）。flex-wrap: wrapを設定すると、スペースが不足した場合にアイテムが次の行に折り返されます。