談到版面配置時,我們通常會將網頁層級設計納入考量。但網頁中較小的元件可以採用獨立的版面配置。
在理想情況下,無論元件在網頁上的位置為何,這些元件層級的版面配置都會自動自行調整。在某些情況下,您並不知道某個元件要放在主要內容欄和/或側欄中。 您必須確保元件能夠根據容器自行調整,而不知道元件最終的哪個位置。
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;
}
瞭解如何在 Chrome 開發人員工具中檢查格線版面配置。
彈性凸版
顧名思義,您可以使用 flexbox 讓元件具有彈性。您可以宣告元件中哪些元素應設有最小或大小上限,然後讓其他元素彈性調整。
在此範例中,圖片佔用了四分之一的可用空間,文字則佔據其他四分之三。但圖片的大小絕不會超過 200 像素。
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
max-inline-size: 200px;
}
.media-content {
flex: 3;
}
瞭解如何在 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 對於微型版面配置都很實用?
您已經瞭解網頁層級巨集版面配置。現在您已瞭解元件層級的微版面配置。
接下來,我們會深入探討內容的基本構成元素,以及如何讓圖片採用回應式設計。首先,您需要瞭解回應式字體排版。