Flexboxの値を選ぶと、並び方がその場で変わり、CSS・HTML・完成版HTMLが出力されるツールです。 コンテナの設定に加えて、アイテムごとの設定(flex-grow・flex-shrink・flex-basis・order・align-selfなど)も試せます。 選んだ値の意味が日本語で表示されます。ブラウザで開くだけで動き、設定した内容は外部に送られません。 無料版もあります。https://mall-aibou.booth.pm/items/8981750 ━━━━━━━━━━━━━━━━━━━━ ご注意 ━━━━━━━━━━━━━━━━━━━━ 出力したコードは、お使いの環境で必ず動作を確認してからお使いください。 プレビューの見え方は、お使いのブラウザによって少し異なる場合があります。 ━━━━━━━━━━━━━━━━━━━━ この商品で得られるもの ━━━━━━━━━━━━━━━━━━━━ ◆ flex-direction・flex-wrap・justify-content・align-items・align-content のすべての値の切り替え ◆ row-gap と column-gap を別々に調整 ◆ コンテナの幅と高さの調整、アイテム数(1〜8つ)の変更 ◆ アイテムごとの設定(幅・高さ・flex-grow・flex-shrink・flex-basis・order・align-self) ◆ よく使うレイアウトの例6つ(中央寄せ・ヘッダー・カードの折り返し・サイドバーと本文・縦の上下固定・等分割) ◆ 選んだ値の意味の日本語表示 ◆ CSS、HTML、1ファイルの完成版HTMLのコピー ━━━━━━━━━━━━━━━━━━━━ 使い方（3ステップ） ━━━━━━━━━━━━━━━━━━━━ 1. flexbox-playground.html をダブルクリックして、ブラウザで開く 2. コンテナの値を選び、アイテムをクリックして、アイテムごとの設定も試す。例のボタンで、よく使うレイアウトから始めることもできます 3. 出力されたCSS・HTML・完成版HTMLをコピーして、ご自分のページに貼る ━━━━━━━━━━━━━━━━━━━━ 動作環境 ━━━━━━━━━━━━━━━━━━━━ ・Chrome / Edge / Safari の最新版 ・ネット接続は不要です ・外部のサーバーと通信しません。広告もトラッキングもありません ━━━━━━━━━━━━━━━━━━━━ できないこと ━━━━━━━━━━━━━━━━━━━━ ・CSS Grid には対応していません。Flexboxだけのツールです ・Flexboxの入れ子(コンテナの中のコンテナ)は扱えません ・アイテムの中身は番号だけです。文章や画像は入れられません ・すべてのブラウザでの見え方は保証できません ■ 使ってよい範囲 　業務・制作にお使いいただけます。クレジット表記は不要です。 　ファイルそのものの再配布・販売はご遠慮ください。 ■ 同梱物 　flexbox-playground.html ／ README.txt TOOL BOX