檢查 CSS Flexbox 版面配置並進行偵錯

本指南說明如何找出頁面上的 Flexbox 元素，以及如何在「Elements」面板中檢查及修改 Flexbox 版面配置。

本文中顯示的螢幕截圖來自這個網頁：使用 Flexbox 將文字元素置中。

探索 CSS Flexbox

當網頁上的 HTML 元素套用 display: flex 或 display: inline-flex 時，在「Elements」(元素) 面板中，該項目旁邊就會顯示 flex 標記。

使用 Flexbox 編輯器修改版面配置

您可以使用 flexbox 編輯器，以視覺化方式修改 Flexbox 版面配置。舉例來說，您可以將這個示範網頁的文字 <h1> 置於其容器 <div class="container"> 的中心。

1. 檢查容器元素。
2. 在「Styles」窗格中，您可以在 display: flex 宣告旁邊看到「Flexbox Editor」按鈕。
3. 按一下該檔案即可開啟 flexbox 編輯器。編輯器會顯示 Flexbox 屬性清單。每個屬性的值選項都會顯示為圖示按鈕。
4. 如要將文字置於畫面中央，請按一下 justify-content: center 和 align-items: center 按鈕。
5. 文字現在置中。請注意，系統會在「Styles」窗格中新增 justify-content: center 和 align-items: center 宣告。

檢查 Flexbox 版面配置

您可以將滑鼠遊標懸停在「Elements」面板中的 Flexbox 元素上，以視覺化方式呈現版面配置。疊加層會在元素上方顯示，並以虛線顯示，代表其內容和項目的位置。

或者，您也可以按一下徽章來切換 Flexbox 疊加層的顯示方式。

請嘗試將值變更為 justify-content: flex-end。疊加層也會隨之變更。

Flex 編輯器中的圖示可感知情境。設定會隨著版面配置方向而改變。舉例來說，當您將 flex-direction 變更為 column 時，Flex 編輯器中的圖示會隨之旋轉。疊加畫面也會立即更新。

調整 Flexbox 重疊顏色

開啟「Layout」窗格，然後向下捲動至「Flexbox」部分。您可以在此檢視此頁面的所有 Flexbox 元素。

您可以使用每個 Flexbox 元素旁邊的核取方塊，切換每個 Flexbox 元素的疊加層。這與您在 DOM 樹狀結構中點選的 badge 相同。

此外，您可以按一下疊加層旁的顏色圖示，變更疊加層的顏色。舉例來說，container 疊加層的顏色會變更為黑色。

如要前往 DOM 樹狀結構中的 Flexbox 元素，請按一下旁邊的選取器圖示。