横並び、右寄せ、縦横中央など、複数の指定を1つの箱にまとめて、見たままのHTMLとCSSをコピーできます。各プロパティを1つずつ動かして意味を確かめる解説は Flexbox完全解説 です。下のプリセット名は、解説の「やりたいことから探す」と同じ言葉です。
このツールは …回 使われています。
Presets（やりたいことから選ぶ）
箱の色はプレビュー用です。コピーするCSSには色を入れていません。
Container（親の指定）
折り返し（flex-wrap）
主軸の揃え（justify-content）
交差軸の揃え（align-items）
箱の数 4
Item（選んだ箱の指定）
箱1を編集中。プレビューの箱を押すと対象が変わります。
表示順（order）
この箱だけの交差軸（align-self）
使い方
- 上のプリセットか、コンテナの指定で、親要素の並べ方を決めます。
- プレビューの箱を押すと、その箱だけ flex・order・align-self を変えられます。箱に書いてある数字はHTMLの順番です。
- プレビュー直下の文で、いま justify-content が横に効いているか縦に効いているかを確認します。方向を縦にすると軸が入れ替わります。
- HTMLとCSS、またはCSSだけをコピーして、自分のページのクラス名に読み替えます。
- 各見出しの右にあるリンクは、同じプロパティのデモがある Flexbox完全解説 の該当節へ移動します。用語の定義は IT用語集のFlexbox を見てください。