Flexboxコンテナの基本設定と軸の制御
CSS Flexboxは、要素を1次元のレイアウト（行または列）として効率的に配置するための仕組みです。Flexboxジェネレーターを使用すると、コンテナとアイテムの関係性を視覚的に調整しながら、最適なCSSコードを設計できます。
レイアウトの基本となるのが「配置方向（flex-direction）」です。この設定によって、アイテムが並ぶ「主軸（main axis）」と、それと直交する「交差軸（cross axis）」が決定されます。
- 横方向（Row）および横方向・逆順（Row reverse）：主軸が水平方向、交差軸が垂直方向になります。
- 縦方向（Column）および縦方向・逆順（Column reverse）：主軸が垂直方向、交差軸が水平方向になります。
配置方向を切り替えると主軸と交差軸が入れ替わるため、「主軸の整列（justify-content）」と「アイテムの整列（align-items）」が制御する方向も連動して変化します。
複数行レイアウトと間隔の調整
コンテナ内のアイテム数が多く、1行に収まりきらない場合の挙動は「折り返し（flex-wrap）」で制御します。「折り返しなし」に設定すると、すべてのアイテムは1行に強制的に収められます。「折り返しあり」または「逆順に折り返し」を選択すると、コンテナの幅を超えたアイテムが自動的に次の行へ折り返されます。
折り返しが発生して複数行になったレイアウトでは、「複数行の整列（align-content）」が機能します。これは、行全体のグループを交差軸方向にどのように配置するかを決定するプロパティです。
また、「間隔（Gap）」に数値を指定することで、アイテム同士の隙間や折り返された行間のスペースを、マージンを使用せずに一括で設定できます。
アイテム個別の柔軟なサイズ調整
Flexboxの強力な特徴は、コンテナのスペースに応じて各アイテムが自律的に伸縮する点にあります。ジェネレーターの「アイテム設定」では、以下のプロパティを個別に調整できます。
- 順序（order）：HTMLの記述順を変更することなく、画面上の表示順序を数値で制御します。
- 拡大（flex-grow）：コンテナ内に余白がある場合、他のアイテムに対してどれだけの比率で自身を拡大させるかを数値で指定します。
- 縮小（flex-shrink）：スペースが不足した際、他のアイテムに対してどれだけの比率で自身を縮小させるかを数値で指定します。
- ベースサイズ（flex-basis）：伸縮が適用される前の基準となるサイズを指定します。数値または「自動ベース（Auto basis）」を選択できます。
- 個別整列（align-self）：コンテナ全体の「アイテムの整列（align-items）」の設定を上書きし、そのアイテムだけを交差軸方向の異なる位置（先頭揃え、末尾揃え、中央揃え、引き伸ばし、ベースライン揃えなど）に配置します。
視覚的なレイアウト設計とCSS出力
「アイテムを追加」をクリックすると、新しいアイテム（例：「Item 5」）が追加され、リアルタイムに変化するレイアウトをプレビューで確認できます。
ジェネレーターは、プロパティが変更されたアイテムのみを識別し、必要なCSSルールだけを生成します。設計が完了したら、「CSSをコピー」をクリックすることで、生成されたCSSコードをクリップボードに保存できます。コピーが完了すると、ボタンの表示は「Copied」に切り替わります。
なお、本ツールにおけるレイアウトの構築処理はお使いのブラウザ上で行われます。ここで設定したデータが外部にアップロードされることはありません。
よくある質問
justify-content と align-items の違いは何ですか？
justify-contentは、行または列が流れる方向である「主軸（main axis）」に沿ってアイテムを配置します。一方、align-itemsは、主軸と交差する「交差軸（cross axis）」に沿ってアイテムを配置します。方向をrow（横）からcolumn（縦）に切り替えると、これら2つの軸が入れ替わるため、justify-contentは上下方向、align-itemsは左右方向の制御に変わります。
アイテムごとの個別設定はどのように機能しますか？
番号でアイテムを選択し、余白を埋めるための拡大比率（grow）、スペースが不足した際の縮小比率（shrink）、基準サイズ（basis）、およびそのアイテム独自の交差軸方向の配置を設定できます。また、orderプロパティを使用すると、HTMLの記述順を変更することなく、画面上の表示順序だけを前後させることができます。実際に値を変更したアイテムのスタイルルールのみがCSSに出力されます。
折り返し（wrap）と align-content はどのような時に必要ですか？
折り返し（wrap）がオフの場合、すべてのアイテムは1行に強制的に収められ、幅が縮小されることがあります。オンにすると、コンテナに収まりきらなくなったアイテムが自動的に次の行に折り返されます。この折り返しが発生した際に、複数行全体の配置を制御するのがalign-contentです。gapプロパティを使用すると、マージンを使わずにアイテム間や行間のスペースを設定できます。