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