こんな方におすすめ
- Flexboxの整列を学ぶ開発者
- ツールバーやカードを並べるデザイナー
Developer Layout Utility
Flexboxレイアウト練習
justify-content、align-items、flex-direction、flex-wrap、gap、align-content をリアルタイムで確認し、CSSコードをすぐに生成できるFlexboxレイアウトツールです。
リアルタイムFlexboxプレビュー
プロパティを変更すると、アイテムの配置、方向、折り返し、間隔がすぐにプレビューへ反映されます。
CSS自動生成
現在のFlexbox設定をもとに、コンテナとアイテム用のCSSコードを自動生成します。
レイアウト学習用
justify-content、align-items、align-content の違いを視覚的に確認できます。
Flexbox設定
Flexコンテナの方向、配置、折り返し、間隔、アイテムサイズを設定してください。
クイックプリセット
よく使うFlexboxレイアウトパターンをすぐに適用できます。
0px
16px
60px
0px
24px
60px
2
5
16
240px
420px
700px
60px
92px
220px
60px
86px
180px
0px
20px
40px
Live Preview
Direction
row
Gap
16px
Wrap
nowrap
生成結果
現在のFlexbox設定をもとに生成されたCSSコードです。
Flexbox設定を変更してから、CSSコード生成ボタンをクリックしてください。
Flexbox配置方式の比較
Flexboxは方向と軸の概念を理解すると、ボタングループ、カード一覧、ナビゲーションレイアウトをすばやく作成できます。
justify-content
メイン軸方向の配置を制御します。rowでは横方向、columnでは縦方向の配置を担当します。
align-items
交差軸方向の配置を制御します。アイテムを開始位置、中央、終了位置、またはstretchで配置できます。
align-content
flex-wrapによって複数行になった場合、行全体の交差軸方向の配置を制御します。
Flexboxの主軸と交差軸を確認してから使う
方向、整列、折り返し、間隔をプレビューで比較できます。コンテナーのCSSに加え、サンプル要素のサイズも出力します。
活用場面
- 空の状態の案内を中央に配置する。
- 複数行の折り返しと整列を比較する。
入力から結果の確認まで
- 1
主軸の方向を選びます。
- 2
justify-contentで主軸の余った空間を配分します。
- 3
align-itemsで行内の交差軸を整列します。
- 4
折り返しを有効にし、複数行でalign-contentを比較します。
- 5
要素サイズを調整してCSSを出力し、DOM順序や長い翻訳文で確認します。
中央配置
- 入力
- row、justify-content:center、align-items:center
- 結果
- 空間がある場合に両軸の中央に並びます。
コンテナーの最小高さにより縦方向の整列が見えます。
折り返すカード
- 入力
- row、wrap、gap 16px
- 結果
- 幅が足りなくなると次の行に移ります。
実際の折り返しは要素幅、縮小、内容にも左右されます。
計算・処理の仕組み
選択した値をコンテナーに適用します。.flex-itemの幅・高さ・角丸もCSSに出力します。要素数はプレビューだけの設定です。
注意点と制限
- 逆方向は表示順を変えてもDOM順を変更しません。
- align-contentには複数行と交差軸の余白が必要です。
- 長い単語や画像は番号付きボックスと異なる動きをします。
データの取り扱い
設定はブラウザー内で処理し、win-jに送信しません。
参考資料
あわせて使えるツール
- CSS Grid生成ツール
画面幅に応じたカード一覧を作る。
- CSSアニメーション生成ツール
要素を一度だけフェード表示する。
よくある質問
align-contentが変化しないのはなぜですか？
nowrapでは1行です。折り返し、要素数、交差軸の空間を増やして比べてください。
要素サイズはプレビュー専用ですか？
いいえ。幅・高さ・角丸も出力します。実際の内容に合わせて調整してください。
すべてFlexboxで配置すべきですか？
内容に合う方式を選びます。行と列を連動させる場合はGridが便利です。