CSS レイアウトワークベンチ
同じコンテナーで Flexbox と Grid を切り替え、コンテナーと子要素のプロパティを調整し、各子要素の DevTools 風ボックスモデルを確認して、コンテナーと子要素の CSS をコピーできます。
CSS レイアウトワークベンチ
同じコンテナーで Flexbox と Grid を切り替え、コンテナーと子要素のプロパティを調整し、各子要素の DevTools 風ボックスモデルを確認して、コンテナーと子要素の CSS をコピーできます。
レイアウトワークベンチの使い方
同じコンテナーで Flexbox と Grid
上部でモードを切り替えると、同じ子要素がもう一方のモデルで並び替わります。Flexbox は主軸と交差軸を制御し、Grid は番号付きのラインを表示するので、子要素をライン 1 からライン 3 まで配置できます。各モードはコンテナー設定を個別に記憶するため、同じレイアウト課題への 2 つの答えを見比べられます。
各子要素のボックスモデルを確認できる
子要素をクリックしてボックスモデルを展開すると、DevTools 風の同心図と実測の content・border-box・margin-box サイズが表示されます。padding・border・margin・box-sizing を変えるとレイアウトが即座に反応し、CSS 出力のその子要素のルールにも同じ宣言が反映されます。
よくある質問
このテーマに関するよくある疑問と回答をまとめました。
以前の Flexbox プレイグラウンド・Grid プレイグラウンド・ボックスモデルビジュアライザーはどこへ？
それらはこのワークベンチの 2 つのモードと、子要素ごとのボックスモデルパネルになりました。以前の URL も引き続き使え、対応するモードで開きます。ボックスモデルの URL は flex モードで最初の子要素のボックスモデルを展開した状態で開きます。
なぜボックスモデルのサイズは入力ではなく実測なのですか？
実際のレイアウトでは、子要素のサイズは入力した width ではなく、コンテナー、flex-basis、grid トラックから決まります。描画後のボックスを実測するのは DevTools と同じ方法で、box-sizing が padding と border の影響をどう変えるかがそのまま見えます。
何かサーバーへ送信されますか？
いいえ。プレビュー、実測値、CSS はブラウザー内で計算され、アカウントもアップロードも履歴の保存もありません。