版面配置

假設您是開發人員 而一位設計人員負責核准你設計全新的網站。 這個設計具備各種有趣的版面配置和組成項目: 考量可視區域寬度和高度的 2D 版面配置 以及需要流暢且靈活的版面配置。 要如何決定最佳的 CSS 版面配置樣式呢?

CSS 提供多種解決版面配置問題的方法 顯示在橫軸和/或垂直軸上 要為情境選擇合適的版面配置方式並不容易 您可能需要使用多種版面配置方法來解決問題 為協助您解決這個問題 您將瞭解各個 CSS 版面配置機制的獨特功能,以便做出明智的決策。

版面配置:簡短記錄

在網路發展的初期 這些設計比簡單的文件更複雜,使用 <table> 元素進行配置。 2090 年代末期由瀏覽器廣泛採用 CSS 後,更容易區分 HTML 與視覺樣式。 CSS 可讓開發人員在完全不必觸碰 HTML 的情況下,徹底變更網站的外觀和風格。 這項新功能啟發了 CSS Zen Garden, 這項認證旨在展示 CSS 的強大功能,並鼓勵更多開發人員學習。

隨著網頁設計和瀏覽器技術的需求不斷演進,CSS 供應商也與時俱進。 您可以參閱 這篇文章

時間軸顯示 CSS 從 1996 年到 2021 年的發展歷程

版面配置:現在與未來

新型 CSS 提供極為強大的版面配置工具, 我們有專屬的版面配置系統,我們會概略介紹我們處理的內容。 ,再到下個單元中深入探討 Flexbox 和 Grid 的細節。

瞭解 display 屬性

display 屬性會執行兩項作業。 首先,作用是決定廣告方塊要套用內嵌或封鎖的方式。

.my-element {
  display: inline;
}

內嵌元素的運作方式類似於句子中的字詞。 兩個元素在內嵌方向中相鄰。 <span><strong> 等元素 這種語言通常用於為包含 <p> (段落) 等元素中的文字設定樣式。 預設會內嵌至內嵌項目 並保留周圍空白字元。

這張圖表顯示方塊的各種尺寸,以及各個尺寸區段的開始和結束位置

您無法針對內嵌元素設定明確的寬度和高度。 周圍元素會忽略所有區塊層級的邊界和邊框間距。

.my-element {
    display: block;
}

區塊元素不會彼此重疊。 他們為自己寫出新一行。除非受到其他 CSS 程式碼變更 方塊元素將展開成內嵌尺寸的大小 因此在水平書寫模式中,會橫跨整個寬度。 區塊元素周圍的邊界會套用邊界。

.my-element {
    display: flex;
}

display 屬性也會決定元素的子項應有的行為。 例如: 將 display 屬性設為 display: flex,即可讓方塊成為區塊層級方塊。 並將其子項轉換為 Flex 項目。 此舉可啟用控制對齊、排序及流程的 Flex 屬性。

Flexbox 與格線

有兩項主要版面配置機制,可用來建立多個元素的版面配置規則:flexboxGrid。 兩者的相似之處,但都是專門用來解決不同的版面配置問題。

Flexbox

.my-element {
    display: flex;
}

Flexbox 是單維版面配置的版面配置機制。 安排在單一軸上 (水平或垂直) 版面配置。 根據預設,Flexbox 會讓元素的子項彼此相鄰 內嵌方向 並沿著區塊方向延展,因此兩者的高度相同

項目會停留在同一軸,空間用盡時不會換行。 相反地,他們會嘗試沿著相同的線條拖曳。 您可以使用 align-itemsjustify-contentflex-wrap 屬性變更此行為。

Flexbox 也會將子項元素轉換為 flex 項目。 這表示您可以編寫規則,決定這些規則在彈性容器中的行為。 你可以變更個別項目的對齊方式、順序和對齊方式。 您也可以使用 flex 屬性變更縮小或放大的方式。

.my-element div {
    flex: 1 0 auto;
}

flex 屬性是 flex-growflex-shrinkflex-basis 的簡寫。 您可以展開上述範例,如下所示:

.my-element div {
 flex-grow: 1;
 flex-shrink: 0;
 flex-basis: auto;
}

開發人員提供這些低階規則,可提示瀏覽器版面配置行為 必須注重內容和可視區域尺寸 因此成為回應式網頁設計的實用機制。

格線

.my-element {
    display: grid;
}

格線與 flexbox 有許多相似之處 但它主要是用於控制多軸的版面配置,而不是單軸的版面配置 (垂直或水平空間)。

格線可讓您在具有 display: grid 的元素上編寫版面配置規則, 以及導入版面配置樣式的一些新基元 例如 repeat()minmax() 函式 fr 單位是一個實用的格線單位,也就是剩餘空間的一部分,您可以建構傳統的 12 欄格線。 且每項商品之間有 3 種 CSS 屬性:

.my-element {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

以上範例說明單軸版面配置。 如果 Flexbox 主要將多個項目視為群組, 格線可讓您在兩種尺寸中精確控制它們的位置。 我們可以定義這個格線中的第一個項目包含 2 列和 3 個資料欄:

.my-element :first-child {
  grid-row: 1/3;
  grid-column: 1/4;
}

grid-rowgrid-column 屬性會指示格線中的第一個元素橫跨至第四欄的開頭。 從第一欄開始,從第一列延伸到第三列

流程版面配置

如果不是使用格狀或 Flexbox 元素會在正常流程中顯示。 您可以運用多種版面配置方法,在正常流程中調整項目的行為和位置。

內嵌區塊

還記得周圍元素不會遵循內嵌元素的區塊邊界和邊框間距嗎? 有了 inline-block,您「可以」達到這個目標。

p span {
    display: inline-block;
}

使用 inline-block 即可產生具有區塊層級元素部分特性的方塊。 但仍會內嵌於文字中

p span {
    margin-top: 0.5rem;
}

浮動

如果您的圖片是放在文字段落中 如果讓文字環繞在報紙上,對嗎? 您可以使用浮點值執行這項操作。

img {
    float: left;
    margin-right: 1em;
}

float 屬性會指示元素「浮點值」設為指定方向 本例中的圖片指示是向左懸浮 如此一來,同層元素就能「換行」。 您可以指示元素將 leftrightinherit 浮動。

,瞭解如何調查及移除這項存取權。

多欄版面配置

如果元素清單很長 例如世界上所有國家/地區的清單 可能會導致使用者大量捲動畫面,並耗費大量時間。 或是在網頁上建立多餘的空白。 透過 CSS 多欄 可以將報表分成多個資料欄,以便解決這兩個問題。

<h1>All countries</h1>
<ul class="countries">
  <li>Argentina</li>
  <li>Aland Islands</li>
  <li>Albania</li>
  <li>Algeria</li>
  <li>American Samoa</li>
  <li>Andorra</li>
  …
</ul>
.countries {
    column-count: 2;
    column-gap: 1em;
}

這樣系統就會將長的清單自動拆分為兩個資料欄,並在兩個資料欄之間新增間隔。

.countries {
    width: 100%;
    column-width: 260px;
    column-gap: 1em;
}

您不需要設定要分割的欄數, 您也可以使用 column-width 定義所需的最小寬度。 隨著可視區域騰出更多空間, 隨著空間有限,系統會自動建立更多的欄 欄也會減少 這在回應式網頁設計環境中非常實用。

位置

最後,我們簡單介紹版面配置機制的位置。 position 屬性會變更元素在文件正常流程中的行為。 以及它與其他元素之間的關係 可用選項包括 relativeabsolutefixedsticky,預設值為 static

.my-element {
  position: relative;
  top: 10px;
}

這個元素會根據在文件中目前的位置微調 10px, 因為調整是相對於自身的位置 為元素加上 position: relative 也會使其包含具有 position: absolute 的所有子元素區塊。 這表示子項的子項現在會重新定位至這個特定元素 而不是最頂端的相對父項 (如果已套用絕對位置)。

.my-element {
  position: relative;
  width: 100px;
  height: 100px;
}

.another-element {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
}

position 設為 absolute 時, 它會將元素從目前文件流程外分解出。 這意味著,我們有兩件事:

  1. 您可以根據自己的位置,使用 toprightbottomleft 及其最接近的相對父項,將此元素放在任何位置。
  2. 所有在絕對元素自動重排周圍的內容,都會填滿該元素左側的剩餘空間。

值為 positionfixed 的元素的運作方式與 absolute 類似。 且父項為根 <html> 元素 固定位置元素會根據您設定的 toprightbottomleft 值,從左上方固定。

您可以在某個地方 使用 sticky 來固定 fixed 的方面,以及 relative 中更可預測的文件流程的各個面向。 有了這個值,當可視區域捲動越過該元素時, 該欄位會維持在您設定的 toprightbottomleft 值。

總結

CSS 版面配置提供許多選擇和彈性。 如要進一步瞭解 CSS FlexboxGrid 的強大功能,請繼續瀏覽接下來的幾個單元。

隨堂測驗

測試您對版面配置的瞭解

display 屬性有什麼功能?

決定子項的行為。
決定格線版面配置頁框。
決定是否應捲動方塊。
決定 inlineblocknone

如要將多個段落填入欄,CSS 屬性最適合用於 執行這項工作嗎?

float
column-count
display: grid
display: flex

如果區塊中斷,代表什麼意思?

陷入河邊。
不再根據其同層級位置決定其定位。
已指定 topleft 的位置值。

Flexbox 和 Grid 預設會包裝子項嗎?