Flexboxジェネレーター
視覚的なコントロールでFlexコンテナとアイテムを設定し、リアルタイムに変化するレイアウトを確認しながら、ワンクリックでCSSをコピーできます。
コンテナ設定
配置方向（flex-direction）
折り返し（flex-wrap）
主軸の整列（justify-content）
アイテムの整列（align-items）
複数行の整列（align-content）
アイテム 1
個別整列（align-self）
レイアウトの構築処理はお使いのブラウザ上で行われます。ここで設定したデータがBroBroGoにアップロードされることはありません。
よくある質問
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プロパティを使用すると、マージンを使わずにアイテム間や行間のスペースを設定できます。