justify-content
space-between
結果
ボックスが両端に分かれて配置される
デザインツール
Flexbox ジェネレーター - 1 次元レイアウトの視覚調整
flex-direction、justify-content、align-items、wrap、gap をライブプレビュー付きで調整できます。box の追加・削除で折り返しや余白を確認し、生成された CSS と HTML scaffold をそのままプロジェクトへ持ち込めます。
DesignCSSLayout
クイック切替:CSS Grid ジェネレーター
このツールをお気に入りに
お気に入りの保存方法がまだ選ばれていません。
クイック操作
このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。
设计配色
Flexbox ジェネレーター
4 项
Flex 容器 row · nowrap
.container {
display: flex;
} 利用シーン
- 等高行や spacing を試作する
- item 数が増えたときの wrap 挙動を確認する
- Flexbox コンテナの初期コードを作る
使い方
- 主軸と交差軸の配置ルールを設定する
- wrap、gap、item 数を調整する
- 生成された CSS または HTML をコピーする
入出力サンプル
FAQ
flex-basis など item ごとの詳細制御もできますか？
主にコンテナ側の flow 調整に焦点を当てています。item は現状、単純な flex grow/shrink/basis 設定で、各 edge case すべてには対応していません。
ツール
関連ツール
近い用途の翻訳済みツールへ続けて進めます。
CSS Grid ジェネレーター
CSS Grid ジェネレーター - 行、列、gap
列数、行数、gap を設定し、基本的な display:grid レイアウトを生成できます。track 構造をプレビューし、簡易テンプレートを試しながら、管理画面レイアウトやカードグリッド向けの CSS / HTML をコピーできます。
CSS Grid Layout