CSS Podcast - 009:版面配置
假設您是開發人員 而一位設計人員負責核准你設計全新的網站。 這個設計具備各種有趣的版面配置和組成項目: 考量可視區域寬度和高度的 2D 版面配置 以及需要流暢且靈活的版面配置。 要如何決定最佳的 CSS 版面配置樣式呢?
CSS 提供多種解決版面配置問題的方法 顯示在橫軸和/或垂直軸上 要為情境選擇合適的版面配置方式並不容易 您可能需要使用多種版面配置方法來解決問題 為協助您解決這個問題 您將瞭解各個 CSS 版面配置機制的獨特功能,以便做出明智的決策。
版面配置:簡短記錄
在網路發展的初期
這些設計比簡單的文件更複雜,使用 <table>
元素進行配置。
2090 年代末期由瀏覽器廣泛採用 CSS 後,更容易區分 HTML 與視覺樣式。
CSS 可讓開發人員在完全不必觸碰 HTML 的情況下,徹底變更網站的外觀和風格。
這項新功能啟發了 CSS Zen Garden,
這項認證旨在展示 CSS 的強大功能,並鼓勵更多開發人員學習。
隨著網頁設計和瀏覽器技術的需求不斷演進,CSS 供應商也與時俱進。 您可以參閱 這篇文章。
版面配置:現在與未來
新型 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
時,
它會將元素從目前文件流程外分解出。
這意味著,我們有兩件事:
- 您可以根據自己的位置,使用
top
、right
、bottom
和left
及其最接近的相對父項,將此元素放在任何位置。 - 所有在絕對元素自動重排周圍的內容,都會填滿該元素左側的剩餘空間。
值為 position
為 fixed
的元素的運作方式與 absolute
類似。
且父項為根 <html>
元素
固定位置元素會根據您設定的 top
、right
、bottom
和 left
值,從左上方固定。
您可以在某個地方
使用 sticky
來固定 fixed
的方面,以及 relative
中更可預測的文件流程的各個面向。
有了這個值,當可視區域捲動越過該元素時,
該欄位會維持在您設定的 top
、right
、bottom
和 left
值。
總結
CSS 版面配置提供許多選擇和彈性。 如要進一步瞭解 CSS Flexbox 和 Grid 的強大功能,請繼續瀏覽接下來的幾個單元。
隨堂測驗
測試您對版面配置的瞭解
display
屬性有什麼功能?
inline
、block
或 none
。如要將多個段落填入欄,CSS 屬性最適合用於 執行這項工作嗎?
float
display: grid
column-count
display: flex
如果區塊中斷,代表什麼意思?
top
或 left
的位置值。Flexbox 和 Grid 預設會包裝子項嗎?