📦 Flexboxジェネレーター
1
2
3
4
CSS
.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コードを「コピー」でコピーして、自分のスタイルシートに貼り付けます。
よくある質問
justify-contentとalign-itemsの違いは何ですか?
justify-contentは主軸(flex-directionの方向)、align-itemsは交差軸(主軸に垂直な方向)での要素の配置を制御します。
アイテムの個数を変えるとどうなりますか?
プレビュー内のボックス数が変わり、wrapやjustify-contentの挙動をより実感しやすくなります。CSSコード自体には影響しません。
個々のアイテムにalign-selfを設定できますか?
いいえ。現在のバージョンはコンテナ全体のプロパティ生成のみに対応しています。