📦 Flexboxジェネレーター
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 12px;
}flex-direction・justify-content・align-items・flex-wrap・gapといったFlexboxのプロパティを、リアルタイムプレビューを見ながら調整できるツールです。生成されたCSSコードはそのままコピーして使えます。レイアウト崩れの原因を探ったり、新しいレイアウトを試作したりするときに便利です。
使い方
- 各プロパティ(方向・折り返し・主軸/交差軸の揃え方)をドロップダウンやスライダーで調整します。
- 上部のプレビューでボックスの配置がリアルタイムに変化します。
- 生成されたCSSコードを「コピー」でコピーして、自分のスタイルシートに貼り付けます。
計算の仕組み
Flexbox（フレキシブルボックスレイアウト）は、要素を横や縦に並べ、余白や配置を柔軟に調整するためのCSSの仕組みです。このツールは、主なプロパティを選ぶとプレビューで並び方を確かめながら、コンテナ用のCSSを作ります。 ・flex-direction: 並べる方向（row＝横、column＝縦、-reverseで逆順） ・justify-content: 並べる方向（主軸）に沿った配置と余白の分け方 ・align-items: 主軸と直角の方向（交差軸）での配置 ・flex-wrap: 1行に収まらないときに折り返すか ・gap: 要素と要素の間隔 justify-contentの space-between は両端の要素を端にそろえて間を均等に、space-around は各要素の両側に同じ余白を、space-evenly はすべての間隔（端を含む）を均等にします。
計算例
横並びで中央にそろえ、間隔を12pxにする場合 .container { display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: nowrap; gap: 12px; } ヘッダーでロゴを左、メニューを右に置く場合は、justify-content: space-between がよく使われます。
使用上の注意
- flex-directionをcolumnにすると、justify-contentが縦方向、align-itemsが横方向の配置を決めるように入れ替わります。
- gapは、Flexboxでも主要なブラウザで使えます。以前はmarginで間隔を作るのが一般的でした。
- 行と列の両方をそろえたい2次元のレイアウトには、CSS Gridの方が向いています。
よくある質問
justify-contentとalign-itemsの違いは何ですか?
justify-contentは主軸(flex-directionの方向)、align-itemsは交差軸(主軸に垂直な方向)での要素の配置を制御します。
アイテムの個数を変えるとどうなりますか?
プレビュー内のボックス数が変わり、wrapやjustify-contentの挙動をより実感しやすくなります。CSSコード自体には影響しません。
個々のアイテムにalign-selfを設定できますか?
いいえ。現在のバージョンはコンテナ全体のプロパティ生成のみに対応しています。