Flexbox ジェネレーター
justify・align・direction・wrapを切り替えながらプレビューしてflex CSSをコピー
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
flex-direction・justify-content・align-items・flex-wrapと間隔(gap)を、ドロップダウンやスライダーで変えながらフレックスボックスの配置をリアルタイムプレビューで確認できます。アイテムの数も調整でき、親コンテナにそのまま貼り付けられるflex CSSをコピーできます。
使い方
- flex-directionとflex-wrapを選び、並ぶ方向と折り返しを決めます。
- justify-content(主軸)とalign-items(交差軸)で配置を整えます。
- gapスライダーとアイテム数でプレビューを好みの形に仕上げます。
- 完成した親コンテナのCSSをコピーして実際のレイアウトに適用します。
よくある質問
- justify-contentとalign-itemsの違いがわかりません。
- justify-contentは「主軸(main axis)」方向の配置です。flex-directionがrowなら横、columnなら縦が主軸になります。align-itemsはそれと直交する「交差軸(cross axis)」の配置なので、方向を変えると2つのプロパティの役割も入れ替わります。
- align-itemsのstretchがプレビューに表示されません。
- stretchは子要素に固定の高さ(または幅)がないときだけ交差軸いっぱいに広がります。このプレビューのアイテムは高さを指定していないためstretchが効きます。centerやflex-startなどに変えると配置の違いを確認できます。
- コピーしたCSSはどこに貼り付けますか?
- flexプロパティは子要素ではなく、子要素を包む「親(コンテナ)」に適用します。なお、ブラウザやバージョンによってレンダリングが微妙に異なる場合があるため、実際の環境で最終確認してから使ってください。