提到版面配置時，我們通常會將網頁層級的設計納入考量。 不過，網頁中較小的元件可以有專屬的獨立版面配置。
在理想情況下，這些元件層級的版面配置會自動調整 無論廣告在頁面上的位置高低 在某些情況下，您可能不知道特定元件會放在主要內容欄和/或側欄中。 如果不知道元件最終會在哪裡 重要的是，確保元件可以根據容器自行調整。
格線
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;
}
瞭解如何在 Chrome 開發人員工具中檢查格線版面配置。
Flexbox
顧名思義，您可以使用 flexbox 將 元件。您可以宣告元件中應使用哪些元素 設有最小或最大尺寸，且讓其他元素 。
在這個範例中，圖片佔用的可用空間為四分之一，而且 則會佔用其他四分之三文字 但圖片絕對不會超過 200 像素。
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
max-inline-size: 200px;
}
.media-content {
flex: 3;
}
瞭解如何檢查 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 適用於微型版面配置？
您先前已瞭解過網頁層級的巨集版面配置。現在您已瞭解 元件層級的微型版面配置
接下來，我們會進一步探討內容構成要素 如何製作回應式圖片首先您會瞭解 回應式字體排版。