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

本指南將說明如何探索網頁上的 Flexbox 元素,以及如何檢查及修改「Elements」面板中的 Flexbox 版面配置。

本文中的螢幕截圖取自以下網頁:使用 Flexbox 將文字元素置中

探索 CSS Flexbox

如果網頁上的 HTML 元素套用 display: flexdisplay: inline-flex, 在「元素」面板中看到 flex 標記。

探索 Flexbox

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

您可以利用 flexbox 編輯器,以視覺化的方式修改 Flexbox 版面配置。以下範例說明如何將這個示範頁面的文字 <h1> 置於容器 <div class="container"> 中。

  1. 檢查容器元素。
  2. 在「Styles」窗格中,您可以看到 display: flex 宣告旁的「flexbox editor」按鈕。 Flexbox 編輯器按鈕
  3. 按一下即可開啟 Flexbox 編輯器。編輯器會顯示彈性容器屬性清單。每個房源的值選項會以圖示按鈕顯示。 Flexbox 編輯器
  4. 如要將文字置於畫面中央,可以按一下 justify-content: centeralign-items: center 按鈕。 將文字置中
  5. 文字已置中。請注意,樣式窗格中已新增 justify-content: centeralign-items: center 宣告。

檢查 Flexbox 版面配置

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

將滑鼠遊標懸停在 Flexbox 元素上

或者,您也可以按一下徽章,切換 Flexbox 疊加層的顯示狀態。

將內容的合理性變更為彈性

請嘗試將值變更為 justify-content: flex-end。系統會據此變更疊加層。

左右內容:彈性

Flex 編輯器中的圖示會根據情境顯示。這會根據版面配置方向變更。例如,當您將 flex-direction 變更為 column 時,Flex 編輯器中的圖示會隨之旋轉。疊加層也會立即更新。

調整 Flexbox 重疊色彩

開啟「版面配置」窗格,然後向下捲動至「Flexbox」部分。您可以在這裡查看網頁的所有 Flexbox 元素。

版面配置窗格

您可以利用核取方塊,切換每個 Flexbox 元素的疊加層。如同在「DOM 樹狀結構」中按一下 badge 相同。

除了上述方法外,您也可以按一下疊加圖層旁的顏色圖示,變更疊加圖層的顏色。舉例來說,container 疊加層的顏色會變更為黑色。

變更疊加層顏色

如要前往 DOM 樹狀結構中的彈性容器元素,請按一下該元素旁的選取器圖示。