CSS レイアウトツール
Flexbox Playground
インタラクティブなビジュアル UI で CSS Flexbox レイアウトを手軽に学習・テストできます。
即時プレビューと CSS / HTML の即時出力に対応し、すべての操作は純粋にフロントエンドで実行されます。
コンテナー設定
flex-direction
justify-content
align-items
flex-wrap
align-content
間隔
Flex アイテムを編集
よく使われるスタイル
即時プレビュー
1
2
3
display: flex;\nflex-direction: row;\njustify-content: flex-start;\nalign-items: stretch;
機能
コンテナの完全設定
Justify/Align 制御
Flex Wrap と Gap
項目ごとの属性編集
即時インタラクティブプレビュー
CSS と HTML を生成
よく使われる Preset 20種類以上
ワンクリックでコードをコピー
レスポンシブプレビュー
項目を追加／削除
元に戻す/やり直す
完全フロントエンドでオフライン実行
Flexbox 基礎チュートリアル
CSS Flexbox は 1 次元 layout model で、container 内の要素が利用可能な空間に応じて size、order、alignment を自動調整できます。
Container Properties
flex-direction— スピンドル方向justify-content— スピンドル配置align-items— cross-axis 配置flex-wrap— 改行モードalign-content— 複数行を揃えるgap— 項目間隔
item プロパティ
flex-grow— 拡大率flex-shrink— 縮小率flex-basis— 初期サイズorder— ソート順align-self— 個別配置
一般的なタイポグラフィ例
水平方向に中央揃え
垂直方向に中央揃え
ナビゲーションバー
カード一覧
サイドバー
等幅フィールド
よくある質問
CSS Flexbox とは何ですか？
CSS Flexbox（Flexible Box Model）は CSS3 が提供する 1 次元レイアウト方式です。項目のサイズが不明または動的でも、コンテナ内の空間配分や配置を効率よく制御できます。レスポンシブデザイン、ナビゲーションバー、カード一覧など、一般的なレイアウトの作成に適しています。
the difference between justify-content and align-items とは何ですか？
justify-content 制御項目は スピンドル（flex-direction）の配置、一方で align-items 制御項目は 交差軸（主軸に対して垂直な方向）。flex-direction が row の場合、justify-content は水平方向、align-items は垂直方向の配置を制御します。flex-grow と flex-shrink はどのように動作しますか？
flex-grow container に空き space があるときの item の拡大率を定義します。default は 0（拡大しない）です。flex-shrink 空き容量が不足したときに item をどの割合で縮小するかを定義します。デフォルトは 1（縮小可）です。すべての item の grow 値合計が 0 より大きい場合、残りの空間は比率に応じて配分されます。flex-wrap は何をするプロパティですか？
コンテナ内の項目の合計幅がコンテナ幅を超えると、
flex-wrap: wrap 項目を無理に 1 行へ押し込まず、自動的に次の行へ折り返します。レスポンシブなカード一覧を作成するときに非常に便利です。このツールは無料ですか？
はい、完全無料で登録も不要です。処理はすべてブラウザ内でローカル実行され、データはサーバーへ送信されません。レイアウト設定も外部へ送信されません。
ブラウザー互換性
Chrome 29+
Firefox 28+
Safari 9+
Edge 12+
Opera 17+
iOS Safari 9+
Android 4.4+
IE 11+
プライバシーステートメント
このツールはすべてブラウザ内で実行されます。作成したレイアウト、項目設定、スタイルがサーバーへ送信されることはなく、作業内容は端末内に留まります。このツールでは Cookie やトラッキングを使用しません。