CSS Flexboxとは？
CSS Flexbox（Flexible Box Layout）は、行または列にアイテムを並べてスペースを配分・整列するための一次元レイアウトモデルです。flexコンテナは display: flex で定義し、直接の子要素がflexアイテムになります。コンテナの主要プロパティ：flex-direction（行または列）、flex-wrap（単一行 vs. 複数行）、justify-content（主軸方向の整列）、align-items（交差軸方向の整列、行ごと）、align-content（複数行の交差軸方向の整列）。アイテムの主要プロパティ：flex-grow（アイテムの伸び率）、flex-shrink（縮み率）、flex-basis（初期サイズ）、align-self（特定のアイテムのコンテナのalign-itemsを上書き）。Flexboxはナビゲーションバー、カード行、中央揃えのレイアウト、あらゆる一次元配置に最適です。
CSS Flexboxジェネレーターの使い方
-
ドロップダウンと入力フィールドを使って、コンテナのプロパティ（flex-direction、flex-wrap、justify-content、align-items、align-content、gap）を調整します。
-
プレビュー内のアイテムをクリックして選択します（オレンジ色になります）。
-
アイテムパネルで選択中アイテムの「flex-grow」「flex-shrink」「flex-basis」「align-self」を設定します。
-
「+ アイテムを追加」をクリックしてアイテムを追加し、「削除」をクリックして選択中アイテムを削除します。
-
CSSとHTMLタブを切り替えて生成コードを確認し、「コピー」をクリックします。
-
「すべてリセット」をクリックするとデフォルトの3アイテムレイアウトに戻ります。