このガイドでは、ページ上の Flexbox 要素を検出する方法と、[要素] パネルで Flexbox のレイアウトを確認、変更する方法を説明します。
この記事のスクリーンショットは、Flexbox でテキスト要素を中央に配置するのウェブページからのものです。
CSS Flexbox について詳しく知る
ページの HTML 要素に display: flex または display: inline-flex が適用されている場合は、[要素] パネルで要素の横に flex バッジが表示されます。
Flexbox エディタを使用してレイアウトを変更する
Flexbox エディタを使用して、Flexbox レイアウトを視覚的に変更できます。たとえば、このデモページの <h1> というテキストをコンテナ <div class="container"> 内中央に配置する方法を次に示します。
- コンテナ要素を検査します。
- [Styles] ペインで、
display: flex宣言の横に [Flexbox Editor] ボタンが表示されます。
- クリックして flexbox エディタを開きます。エディタに Flexbox プロパティのリストが表示されます。各プロパティの値のオプションは、アイコンボタンとして表示されます。
- テキストを画面の中央に配置するには、
justify-content: centerボタンとalign-items: centerボタンをクリックします。
- テキストが中央に配置されました。
justify-content: center宣言とalign-items: center宣言が [Styles] ペインに追加されていることに注目してください。
Flexbox レイアウトを確認する
[要素] パネルの Flexbox 要素にカーソルを合わせると、レイアウトを視覚化できます。オーバーレイは要素の上に表示され、コンテンツとアイテムの位置を示す点線が配置されます。
または、バッジをクリックして Flexbox のオーバーレイの表示を切り替えることもできます。
値を justify-content: flex-end に変更してみてください。それに応じてオーバーレイが変更されます。
Flex エディタのアイコンはコンテキストアウェアです。レイアウトの方向に応じて変わります。たとえば、flex-direction を column に変更すると、Flex エディタのアイコンがそれに応じて回転します。オーバーレイもすぐに更新されます。
Flexbox のオーバーレイの色を調整する
[レイアウト] ペインを開き、[Flexbox] セクションまで下にスクロールします。このページの Flexbox 要素をすべて表示できます。
各 Flexbox 要素のオーバーレイは、隣のチェックボックスで切り替えることができます。これは、DOM ツリーの badge をクリックしたときと同じです。
オーバーレイの色を変更するには、オーバーレイの色の横にある色アイコンをクリックします。たとえば、container オーバーレイの色が黒に変更されます。
DOM ツリーの Flexbox 要素に移動するには、その横にあるセレクタ アイコンをクリックします。