版面配置

CSS Podcast - 009：版面配置

假設您是開發人員 而一位設計人員負責核准你設計全新的網站。 這個設計具備各種有趣的版面配置和組成項目： 考量可視區域寬度和高度的 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 與格線

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

Flexbox

.my-element {
    display: flex;
}

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

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

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

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

flex 屬性是 flex-grow、flex-shrink 和 flex-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-row 和 grid-column 屬性會指示格線中的第一個元素橫跨至第四欄的開頭。 從第一欄開始，從第一列延伸到第三列

流程版面配置

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

內嵌區塊

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

p span {
    display: inline-block;
}

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

p span {
    margin-top: 0.5rem;
}

浮動

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

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

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

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

多欄版面配置

如果元素清單很長 例如世界上所有國家/地區的清單 可能會導致使用者大量捲動畫面，並耗費大量時間。 或是在網頁上建立多餘的空白。 透過 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 屬性會變更元素在文件正常流程中的行為。 以及它與其他元素之間的關係 可用選項包括 relative、absolute、fixed 和 sticky，預設值為 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. 您可以根據自己的位置，使用 top、right、bottom 和 left 及其最接近的相對父項，將此元素放在任何位置。
  2. 所有在絕對元素自動重排周圍的內容，都會填滿該元素左側的剩餘空間。

值為 position 為 fixed 的元素的運作方式與 absolute 類似。 且父項為根 <html> 元素 固定位置元素會根據您設定的 top、right、bottom 和 left 值，從左上方固定。

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

總結

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

隨堂測驗

測試您對版面配置的瞭解

display 屬性有什麼功能？

決定 inline、block 或 none。
版面配置引擎必須知道這個方塊是否為完整寬度，且需要換行。
決定格線版面配置頁框。
顯示屬性可將顯示設定為格線，但版面配置框沒有任何其他操作。
決定子項的行為。
Flexbox 和網格提供符合孩子們的意見和新功能。
決定是否應捲動方塊。
也就是 overflow 屬性。

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

display: grid
雖然格狀版面可以將多個段落放入各欄，但這些欄會是自己的欄，而不是依序排列。
column-count
段落會從某一欄的結尾處到下一欄的開頭，如同雜誌或報紙的寫法。
display: flex
雖然 Flex 可以將多個段落放入不同的欄，但這些欄會是自己的欄，而非依指示來回排列。
float
請再試一次！

如果區塊中斷，代表什麼意思？

陷入河邊。
背景資訊是 CSS，而非地理位置。
已指定 top 或 left 的位置值。
如果只具備這些屬性，並不會從流動中提取方塊。
不再根據其同層級位置決定其定位。
舉例來說，含有 position: absolute 的方塊現在會根據包含的區塊，以 x 和 y 座標定位，而不是根據其他同層元素的順序。

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

是
必須採用 flex-wrap: wrap 或 repeat(auto-fit, 30ch)。
否
Flexbox 和 Grid 具有特殊的包裝功能，需要額外的樣式才能套用。