微版面配置

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

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

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

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 都非常實用，即使對版面配置的「極小」也有幫助。

您已經瞭解網頁層級巨集版面配置。現在您已瞭解元件層級的微版面配置。

接下來，我們會深入探討內容的基本構成元素，以及如何讓圖片採用回應式設計。首先，您需要瞭解回應式字體排版。