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 エディターの使い方
コントロールを使用してフレックスコンテナプロパティを調整します。プレビューはアイテムがリアルタイムで配置される方法を示します。異なる構成をテストするためにアイテムを追加または削除します。プロジェクト用に生成された 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 を設定すると、スペースがなくなったときにアイテムが次の行に流れます。
このツールが役に立ったら、作者にコーヒーをおごってください。
コーヒーをおごる