微版面配置

提到版面配置時，我們通常會將網頁層級的設計納入考量。 不過，網頁中較小的元件可以有專屬的獨立版面配置。

在理想情況下，這些元件層級的版面配置會自動調整 無論廣告在頁面上的位置高低 在某些情況下，您可能不知道特定元件會放在主要內容欄和/或側欄中。 如果不知道元件最終會在哪裡 重要的是，確保元件可以根據容器自行調整。

雙欄版面配置，一個寬版和一個窄版。視媒體物件位於寬度欄或窄欄而定，其配置方式會有所不同。

格線

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

顧名思義，您可以使用 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 元件

瞭解如何檢查 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>

媒體查詢會在 main 和 aside 元素出現 可視區域的寬度大於 45em。

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

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

雙欄版面配置，一個寬版和一個窄版。 視媒體物件位於寬度欄或窄欄而定，其配置方式會有所不同。

容器查詢可大幅改變微版面配置的局面。 元件可以是獨立性質，與瀏覽器可視區域無關。

隨堂測驗

測試您對微版面配置的瞭解程度。

格線和 Flexbox 適用於微型版面配置？

是
🎉? 答對了！
否
答錯了。網格和 Flexbox 都非常實用版面配置

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

接下來，我們會進一步探討內容構成要素 如何製作回應式圖片首先您會瞭解 回應式字體排版。