手探りなしでFlexboxを使いこなす
方向・整列・折り返し・間隔を選ぶと、プレビューがライブ更新され、コンテナのCSSがコピー可能に。
-
プロパティを設定
direction, justify, align, wrap, gap。
-
プレビューを見る
番号付き要素がライブで反応。
-
CSSをコピー
コンテナに適用。
コンテナのCSS
| プロパティ | 役割 |
|---|---|
| display: flex | Flexbox有効化 |
| flex-direction | 行か列か |
| justify-content | 分配（主軸） |
| align-items | 整列（交差軸） |
| gap | 要素間の間隔 |
CSSは親に適用、子は自動配置。すべてブラウザ内で生成。
よくある質問
Flexboxは何のため？
Flexboxは、要素を行や列に沿って整列・分配するCSSのレイアウトモードです。間隔・中央寄せ・折り返しを自動処理し、レスポンシブなレイアウトを大幅に簡単にします。
justify-content と align-items の違いは？
justify-content は主軸（rowでは水平）に沿って分配、align-items は交差軸（rowでは垂直）で整列します。column にすると両軸が入れ替わります。
生成CSSはコンテナ用？要素用？
コンテナ用です。プロパティ（display: flex, justify-content など）は親に付け、子は自動配置。プレビューは番号付き要素で効果を可視化します。
flex-wrap の働きは？
既定（nowrap）では要素は1行に収まり、必要なら縮みます。wrap では空間が足りないと次の行へ折り返します。流動的なグリッドに便利。