微版面配置

談到版面配置時，我們通常會將網頁層級設計納入考量。 但網頁中較小的元件可以採用獨立的版面配置。

在理想情況下，無論元件在頁面上的位置為何，這些元件層級版面配置的配置應該都會自動調整。在某些情況下，您並不知道某個元件要放在主要內容欄和/或側欄中。 您必須確定元件能夠根據容器進行調整，才能確定元件最終的執行位置。

雙欄版面配置，寬和一個窄。根據展開或窄欄，媒體物件會以不同方式排列。

GRid

CSS 格線不只適用於網頁層級版面配置。 此外，容器內的元件也可以順暢運作。

在這個範例中，::before 和 ::after 虛擬元素會在標題兩側建立裝飾線條。標題本身是格狀容器。系統會逐一列出個別元素，讓每一行都填滿可用空間。

h1 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1em;
}
h1::before,
h1::after {
  content: "";
  border-top: 0.1em double black;
  align-self: center;
}
Firefox 中的開發人員工具顯示格狀檢視。 Chrome 中的開發人員工具顯示格狀檢視畫面。
電腦版瀏覽器 (例如 Firefox 和 Chrome) 提供開發人員工具，可以顯示與設計重疊的格線和區域。

瞭解如何在 Chrome 開發人員工具中檢查格線版面配置。

彈性凸版

顧名思義，flexbox 可讓你為元件設定彈性。您可以宣告元件中哪些元素應設有最小或最大尺寸，然後讓其他元素彈性調整。

在此範例中，圖片佔據可用空間的四分之一，文字佔據其他四分之三。 但圖片的大小絕不會超過 200 像素。

.media {
  display: flex;
  align-items: center;
  gap: 1em;
}
.media-illustration {
  flex: 1;
  max-inline-size: 200px;
}
.media-content {
  flex: 3;
}
Firefox 中的開發人員工具顯示 Flexbox 重疊。 Chrome 中的開發人員工具顯示 Flexbox 重疊。
您可以運用 Firefox 和 Chrome 中的開發人員工具，以視覺化方式呈現 Flexbox 元件的形狀。

瞭解如何在 Chrome 開發人員工具中檢查 Flexbox 版面配置。

容器查詢

Flexbox 可讓您自行設計內容。您可以指定元素的參數 (參數的寬度和應有的寬度)，並讓瀏覽器知道最終的導入方式。

不過，這個元件本身無法得知其結構定義。 但無法得知主要內容用於主要內容或側欄中。 這可能會使元件版面配置比頁面版面配置更難。如要套用內容相關樣式，元件的可視區域大小必須要大於其所設。

使用網頁版面配置時，您「確實」知道容器的寬度，因為容器是瀏覽器可視區域；媒體查詢會回報網頁層級容器的尺寸。

如要回報任何容器的維度，請使用容器查詢。

首先，請定義哪些元素做為容器使用。

main,
aside {
  container-type: inline-size;
}

換句話說，您可以查詢內嵌維度。 如果是英文文件，橫軸： 您將根據容器寬度變更樣式。

如果某個元件位於這些容器中 您可以用類似媒體查詢的方式套用樣式

.media-illustration {
  max-width: 200px;
  margin: auto;
}

@container (min-width: 25em) {
  .media {
    display: flex;
    align-items: center;
    gap: 1em;
  }

  .media-illustration {
    flex: 1;
  }

  .media-content {
    flex: 3;
  }
}

如果媒體物件位於小於 25em 的容器內，系統就不會套用 Flexbox 樣式。圖片和文字依垂直順序顯示。

但如果所含元素的寬度超過 25em，圖片和文字就會並列顯示。

容器查詢可讓您以獨立的方式設定元件樣式。 可視區域的寬度不再重要。您可以根據所含元素的寬度編寫規則。

兩個不同大小的容器。

合併查詢

您可以針對網頁版面配置使用媒體查詢，以及針對網頁中的元件進行容器查詢。

以下網頁的整體結構包含 main 元素和 aside 元素。 兩個元素中都有媒體物件。

<body>
  <main>
     <div class="media">…</div>
     <div class="media">…</div>
  </main>
  <aside>
     <div class="media">…</div>
  </aside>
</body>

當可視區域寬度大於 45em 時，媒體查詢會將格線版面配置套用至 main 和 aside 元素。

@media (min-width: 45em) {
  body {
    display: grid;
    grid-template-columns: 3fr 1fr;
  }
}

媒體物件的容器查詢規則會保持不變：只有在所含元素的寬度大於 25em 時，才套用水平 Flexbox 版面配置。

雙欄版面配置，寬和一個窄。 根據展開或窄欄，媒體物件會以不同方式排列。

容器查詢是微版面配置帶來的改變。元件可以是獨立內容，不受瀏覽器可視區域影響。

隨堂測驗

測驗您對微版面配置的相關知識。

格線和 Flexbox 對於微型版面配置都很實用？

是
🎉
否
🎉? 格線和 Flexbox 都非常實用，即使是對版面配置的「極低」也一樣。

您已經瞭解頁面層級巨集版面配置。 現在您已瞭解元件層級的微版面配置。 接下來，你則會深入探索內容的重要基石。 您將學到如何製作回應式圖片。接著來看看回應式字體排版