大家好，我是 Eric。
一般在學習 CSS 的時候，都會從較簡單的樣式開始，例如字型顏色 (color)、字型系列 (font-family) 等。但今天，我們先從範圍較廣泛的版面配置 (layout) 說起。

在開始之前：CSS 權重的基本原則

在開始進入 CSS 的樣式篇章前，我們必須注意幾個基本原則：

原則一：寫在越後面的權重越大

我們來看看下列語法：

    p {
        color: #000;
    }
    p {
        color: #1adbca;
    }

在上述的語法中，由於第二個 <p> 元素的選擇器較晚出現，因此瀏覽器最終會採用它的樣式。

我們再看看 Twenty Twenty 示範頁面的 HTML 語法：

<link rel="stylesheet" id="wp-block-library-css" href="https://wp-themes.com/wp/wp-includes/css/dist/block-library/style.min.css?ver=5.6-alpha-48971" media="all">
<link rel="stylesheet" id="twentytwenty-style-css" href="https://wp-themes.com/wp-content/themes/twentytwenty/style.css?ver=1.5" media="all">
<style id="twentytwenty-style-inline-css">
/** 此處省略 */
</style>
<link rel="stylesheet" id="twentytwenty-print-style-css" href="https://wp-themes.com/wp-content/themes/twentytwenty/print.css?ver=1.5" media="print">

按照這項原則，在使用相同選擇器時，Twenty Twenty 的樣式 (twentytwenty/style.css) 會覆蓋區塊編輯器 (block-library/style.min.css) 的樣式；而 [自訂 CSS] 的 <style id="twentytwenty-style-inline-css"> 內嵌樣式又會覆蓋 Twenty Twenty 的樣式。

也因為這項原則，因此內嵌樣式的權重會是最高的權重。這項特性在 WordPress 中非常重要，因為許多外掛都會直接幫元素加上內嵌樣式，因此即使透過 [自訂 CSS]，有時候也無法覆蓋這些樣式。

原則二：ID > 類型 (class) > 元素/虛擬元素

以下列的 HTML 語法為例：

<article class="post-19 post type-post status-publish format-standard hentry category-uncategorized tag-boat tag-lake" id="post-19">

接著我們用下列三種 CSS 選擇器來設定樣式：

#post-19 {
    background-color: #ff0000;
}
.type-post {
    background-color: #333;
}
article {
    background-color: #000;
}

儘管 article 在最後才出現，但因為原則二的關係，這個區塊的最終樣式會是 background-color: #ff0000;。

原則三：選擇器越精準，權重越高

我們一樣用上述的例子來看，用下列三種方式來進行選擇：

/* 1 */
article.type-post {
    background-color: #ff0000;
}
/* 2 */
article.post.type-post {
    background-color: #ff2200;
}
/* 3 */
article#post-19.post {
    background-color: #ff4422;
}

按照原則三，上述的樣式順位會是 3 > 2 > 1。

關於選擇器的權重，可以透過這個 Specificity Calculator 網站來做檢驗。

例外：!important

我們在原則一中，曾經提到，許多 WordPress 的外掛，會將樣式內嵌於元素中，以致 [自訂 CSS] 無法覆寫樣式。為了解決這個問題，我們需要了解一下 !important。首先，我們將前面的例子稍作改寫：

/* 1 */
article.type-post {
    background-color: #ff0000 !important;
}
/* 2 */
article.post.type-post {
    background-color: #ff2200;
}
/* 3 */
article#post-19.post {
    background-color: #ff4422;
}

因為我們在屬性值的後面加上 !important 後，這項屬性可以無視前面的權重。但須注意的是，這只是例外的使用方法，應該要盡量避免。

掌管版面配置的屬性 display

使用 display 的基本語法如下：

選擇器 {
    display: none|inline|inline-block|block|flex|grid;
}

在 W3schools 中，有詳細列舉 display 中可以包含的屬性值，對各種屬性的特性想要進一步了解的話可以參考。

這個屬性，掌管著元素的版面樣式配置。在進入今天的主題 flex 之前，我們先介紹幾個重要的屬性：
屬性值 | 說明
-------+-------
none | 不顯示，在頁面不會佔據任何空間。
inline | 內嵌，在其後的相鄰元素不會換行。<span> 與 <a> 通常預設會使用這種顯示方式。display 為 inline 時，無法指定元素的寬度與高度。
block | 區塊元素，可以指定寬度與高度。會使相鄰的元素換行。
inline-block | 內嵌區塊，擁有內嵌版面「相鄰元素不會換行」的特性，同時也能指定寬度與高度。

在 style.css 中，我們可以看到 display 這個樣式屬性大量出現。以設定基礎樣式的第 288 行為例：

/* style.css Line 288 */
main {
	display: block;
}

/* style.css Line 601 */
figure {
	display: block;
	margin: 0;
}

iframe {
	display: block;
	max-width: 100%;
}

video {
	display: block;
}

通常為了方便設定元素的寬度，基本上除了 <label> 或 <span> 這種會在句中出現的元素外，通常會將所有的元素指定為 block 或 inline-block 的方式。

了解了基本的 display 屬性後，我們接著開始談談 flex。

display: flex;

在當代網頁開發中，我們時常需要將元素對齊，譬如許多人時常會問道：「我要如何置中這個元素？」而 flex 就是用來排列子層級元素樣式。

在 flex 這個屬性出現之前，較早的作法會使用 float 這個屬性。float 這個屬性相當於我們在 Word 中看到的「文繞圖」效果。也因為這個屬性主要作用，是在讓指定的元素溢出於其他元素之外，因此時常會產生未預期的錯誤。

而在 flex 出現後，我們有更好的方法來排列子層級元素。flex 所掌管的，是直線的排列方式，讓子元素可以更整齊地排列。以我們公司的官網為例，就是使用 flex 來排列頁首的選單列，藉此讓選單項目的排列順序更符合我的期待。

基本的樣式屬性如下：

選擇器 {
    display: flex;
    樣式屬性: 屬性值;
}

樣式屬性 | 屬性值 | 說明
-------+-------+-------
flex-wrap | wrap | 當子層級元素的全部寬度大於螢幕時，是否要換行。wrap 表示會換行。
flex-direction | row/column/row-reverse/column-reverse | 排列的方向是橫向 (row) 或縱向 (column)。如果有 reverse 則會將子層級元素的排序顛倒。
justify-content | flex-start/flex-end/center/space-between/space-around | 水平對齊，更精確的說是平行對齊。因為當 flex-direction 為 column 時，便變成縱向對齊。
align-items | flex-start/flex-end/center/space-between/space-around | 垂直對齊，與水平對齊一樣，如果是 column 的話，便變成橫向對齊。

網路上有個名為 Flexbox Froggy 的遊戲，如果想要熟悉 flex 語法的話，非常建議可以從這個互動遊戲中練習。

我們來看看 flex 在 Twenty Twenty 中扮演什麼角色：

/* style.css Line 642 */
.gallery {
	display: flex;
	flex-wrap: wrap;
	margin: 3em 0 3em -0.8em;
	width: calc(100% + 1.6em);
}

在 Twenty Twenty 中，gallery 用於圖庫區塊。藉由 display: flex; 及 flex-wrap: wrap;，讓圖庫的個別子層級元素可以按照預期的方式呈現。

結語

今天我們討論了 CSS 中一項相當核心的屬性值 display。透過 display 這個屬性，我們可以告訴瀏覽器，目前的元素應該以什麼樣的「身份」存在於網頁中：「隱形 (none)？內嵌於元素間 (inline)？區塊 (block)？」
在回應式設計 (Responsive Web Design) 中，如何在不同的畫面寬度中，使版面配置調整成符合設計稿的樣貌，一直是前端工程的重要課題。透過 flex 的方式，我們可以將不同的元素井然有序的排列在一直線上。不過隨著瀏覽器逐漸演進，人們開始從「直線」的排列轉為思考「平面」的排列。
下一章，我們就要來討論掌控「平面」排列的 grid 配置。