CSS Flexbox レイアウトを検査してデバッグする

このガイドでは、ページ上の Flexbox の要素を検出する方法と、[Elements] パネルで Flexbox のレイアウトを調査して変更する方法について説明します。

この記事のスクリーンショットは、Flexbox を使用してテキスト要素を中央に配置するのウェブページからのものです。

CSS Flexbox について学ぶ

ページの HTML 要素に display: flex または display: inline-flex が適用されている場合、[要素] パネルで要素の横に flex バッジが表示されます。

Flexbox のご紹介

Flexbox エディタを使用してレイアウトを変更する

Flexbox のレイアウトは、Flexbox エディタで視覚的に変更できます。例として、このデモページのテキスト <h1> をコンテナ <div class="container"> 内で中央に配置する方法を次に示します。

  1. コンテナ要素を検査します。
  2. [Styles] ペインで、display: flex 宣言の横に [Flexbox editor] ボタンが表示されます。 Flexbox エディタのボタン
  3. これをクリックして Flexbox エディタを開きます。エディタに、Flexbox プロパティのリストが表示されます。各プロパティの値のオプションは、アイコンボタンとして表示されます。 Flexbox エディタ
  4. テキストを画面上の中央に配置するには、justify-content: center ボタンと align-items: center ボタンをクリックします。テキストをコンテナの中央に配置する
  5. テキストが中央に配置されます。justify-content: center 宣言と align-items: center 宣言が [スタイル] ペインに追加されています。

Flexbox レイアウトを確認する

[要素] パネルで Flexbox 要素にカーソルを合わせると、レイアウトを可視化できます。オーバーレイは要素の上に表示され、コンテンツとアイテムの位置を示すために点線で囲まれて表示されます。

Flexbox の要素にカーソルを合わせ

または、バッジをクリックして、Flexbox オーバーレイの表示を切り替えることもできます。

Justify-content を flex-end に変更

値を justify-content: flex-end に変更してみてください。それに応じてオーバーレイが変更されます。

両端揃え: flex-end

Flex エディタのアイコンはコンテキスト アウェアです。レイアウトの方向に応じて変わります。たとえば、flex-directioncolumn に変更すると、それに応じて Flex エディタのアイコンが回転します。オーバーレイもすぐに更新されます。

Flexbox のオーバーレイの色を調整する

[レイアウト] ペインを開き、[Flexbox] セクションまで下にスクロールします。このページのすべての Flexbox 要素をここで確認できます。

レイアウト ペイン

Flexbox の各要素のオーバーレイは、横にあるチェックボックスで切り替えることができます。これは、DOM ツリーbadge をクリックするのと同じ結果になります。

ほかに、オーバーレイの隣にある色アイコンをクリックして、オーバーレイの色を変更することもできます。たとえば、container オーバーレイの色が黒に変わります。

オーバーレイの色を変更

DOM ツリー内の Flexbox 要素に移動するには、その隣にあるセレクタ アイコンをクリックします。