蛋黃油男健康是最好的禮物蛋黃油https://www.facebook.com/eggsoil

總覺得 15 天就會結束了說（笑）。

只是說講完之後到底能不能滿 30 天呢 X...]]> 現在終於可以開始講 Grid 單元的事情了，雖然可以講的事情可能不多，絕大部分會圍繞在造成容器影響的地方，當然基本的東西還是會先帶一下。

只是說講完之後到底能不能滿 30 天呢 XD

Grid 單元

首先，他跟 Flexbox 一樣，如果內容單元是包含在 Grid 容器裡面的話，他本身是宣告成 Grid 格式的文本（Grid formatting context），他並不會因為你把他宣告成 Box Module 而轉換成你所知道的區塊元件（Block formatting context），在 Grid 容器內的元件，基本上都會被自動指定為 display: block 這樣的樣式。

同時，在一個 Grid 容器宣告為 display: grid 或 display: inline-grid 當下，其內容所包含的元件會全部被區塊化（blockification），也就是現在說的 Grid 單元。

有趣的地方在於，一個合法的 Grid 容器（其內容包含 Grid 單元），在改變區塊樣式時（例如：display: none），其 Grid 單元產生（DOMTree 渲染）的區塊化還是會發生，說的比較白話一點就是，他還是會把 Grid 單元區塊化動作完成之後，外層的 Grid 容器才會做 display: none 的動作。

但是，

如果 Grid 單元設定為 display:contents 則不在此列。關於這個設定我在整個 Grid 單元講完之後再來講這個特別的東西。其實我以前有約略講過，有興趣的人可以自己去看看 [CSS] 關於 Grid Layout 的使用姿勢。

另外，在相連的 Grid 單元如果宣告為非區塊元件時，由於已經區塊化了，所以基本上他還是會屬於區塊元件，他會阻斷匿名區塊元件的產生（anonymous block box）。舉例來說，如果把 Grid 單元使用 display: table-cell 的設定，那麼他們最終會被轉換成 display: block，並不會建立成匿名表格單元（anonymous table box）。

關於匿名區塊這邊就不多說了，有興趣的我看最後有沒有時間再來聊聊。

有興趣可以看這裡 2.4. Layout-Internal Display Types: the table-* and ruby-* keywords

尺寸

Grid 單元有三種尺寸的面向，

何謂 自然尺寸？舉例來說，你這個單元是 <img> 元件的話，這個元件尺寸將會被定義為 src 屬性所指定的圖片尺寸。詳細的說明可以看看 w3c 的敘述 CSS Images Module Level 3, natural size。

Grid 單元定義尺寸的方式，是使用對齊樣式來做設定。對，講來講去都會回到對齊模組這件事情，我也是覺得很神奇。

Self-Alignment: Aligning the Box Within Its Parent

基本上單元可以使用這些設定值來對齊，然後只有 stretch 跟尺寸有關，

說在前面的，關於 auto, normal, stretch 基本上在沒有任何設定的情況，也不是被替換元件的話，基本上沒有差異。以下稍微說明一下各種設定數值的作法，

• auto 基本上跟著 Grid 容器的設定，對應的數值就是 justify-items, align-items 與 place-items 這三個。
• normal 跟 auto 基本上一樣，但為何要分兩個？老實說我不知道。
• stretch 依照 Grid 網格格線比例填滿，但 margin 任何一個軸方向都不可為 auto，且還是會受到 min-width, min-height, max-width, max-heigth 限制。
• <baseline-position> 可以使用 baseline, first baseline, last baseline 三種關鍵字。
• <overflow-position> 可以使用 safe, unsafe 關鍵字。
• <self-position> 可以使用 center, start, end, self-start, self-end 關鍵字。

可替換元件的尺寸

圖片就是一個很常見的可替換元件，

.grid-containter {
    display: grid;
    
    grid-template: repeat(3, 300px) / repeat(3, 300px);
    
    gap: 10px;
}

.grid-item:first-child {
    // 不做任何設定
}

<div class="grid-container">

    <img class="grid-item" src="..." alt="我是圖片">
    
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>

    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>

    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>

</div>

最終你會得到這個畫面，

當你把 <img> 設定尺寸後，基本上他就會變成 有定義尺寸 的區塊元件。但是呢，區塊單元的尺寸跟你所定義的軌道尺寸基本上是兩件事情，所以無論他是自然尺寸，還是有定義尺寸，該超出軌道的地方一樣都會超出去。

換句話說，除非上述的例子，你的 <img> 使用了 width: 100% 這種相對尺寸，這個時候才會填滿整個欄軌道（寬度的部分），但是，因為自然尺寸比例的關係，這種時候就會換列軌道超出範圍了。

所以，並不太建議將 Grid 單元使用可替換元件，尺寸的問題你可能會一直處於無解的狀況。

無尺寸限制方向的魔性

一般來說無尺寸設定在目前的裝置上，是指 row 方向，也就是 grid-template-rows 的樣式設定。為何說他有魔性呢？我們舉個例子來說，首先，我們先給來一個空的 Grid 容器，

.grid-containter {
    display: grid;
    
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
    
    gap: 10px;
}

<div class="grid-container">

    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>

    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>

    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>

</div>

這個時候你會得到像是這樣的結果，

接下來，我們把 5 號的 Grid 容器指定一個 高度 的尺寸，

.grid-item:nth-of-type(5) {
    height: 200px;
}

根據常識判斷，我們這個 3x3 的容器，應該會變成第二列的高度為 200px，然後其他列的尺寸應該會保持原本的 fit-content 的相關尺寸，對吧？

對吧？

不對！

為什麼？

根據官方軌道尺寸演算法 Track Sizing Algorithm 當中的第四點，

Expand Flexible Tracks

當你的剩餘空間是無定義長度，換句話說以 row 的角度來看，他可以是 無限大 的情況下，必須根據以下法則來計算尺寸，

• 根據彈性係數 fr 來均分所有的軌道尺寸。
• 根據每個 Grid 單元所貢獻的最大尺寸（max-content），來計算填充空間，用以當作 fr 的尺寸。

所以，我們把 5 號的 Grid 容器指定一個 高度 為 200px 的話，那麼 Grid 單元當中的最大貢獻尺寸就是 200px，所以對於 grid-template-rows 來說，他的 max-content 就會被當作 1fr 來使用。

對齊的基本操作

我們先撇除那些對於會超出 Grid 軌道尺寸的東西，來講講 Grid 單元對齊這件事情。雖然我還是覺得，把 stretch 放在對齊模組裡面實在是很奇怪，但好多年來都這樣了好像也不能怎麼樣（笑）。

先決條件，請不要把 margin 的任何方向設定為 auto。

首先，我們從空的容器來看，

.grid-containter {
    display: grid;
    
    grid-template: repeat(3, 400px) / repeat(3, 400px);
    
    gap: 10px;
}

<div class="grid-container">

    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>

    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>

    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>

</div>

接著我們一樣把第 5 號的 Grid 單元作一些設定，

.grid-item:nth-of-type(5) {
    align-self: end;
    justify-self: end;
}

那麼我們就會得到這樣的結果，

你會發現我指定了 Grid 單元的尺寸，然後再把他做一個對齊的動作。這個時候聰明的你應該就會發現，其實 Grid 單元跟整個 Grid 軌道根本沒有什麼太大的關係。

是的，Grid 軌道是軌道，Grid 單元是單元，沒有直接的關係。

這也就是為什麼 Grid 單元尺寸超出軌道限制時，他就是很單純的 超過軌道 了，而不會發生任何奇怪的事情的原因。

底下我們用一個簡單的示意圖來解釋上面一堆關鍵字，

在這些關鍵字當中，self-* 的關鍵字主要會跟 writing mode 有關。由於我們平常所面對的系統都是 LTR（由左至右書寫），所以當你遇到 RTL 的文本時，你使用 start 跟 self-start 就會出現差異。

我們可以用 direction: rtl 來模擬這種狀況，

所以對於直式書寫的設定也是一樣的道理。這個就是對於 Grid 單元的對齊方式，這邊之所以不提 stretch 的原因是，他本身就是將整個 Grid 單元填滿軌道，所以既然已經 填滿軌道 了，那麼就沒有對齊的問題。

小記

只要記得一件事情，

除了 stretch 以外，Grid 軌道尺寸不等於 Grid 單元尺寸。

剩下的我們明天再繼續。

目錄與小節：
[CSS] Flex/Grid Layout Modules, part 1

部落格同步放送：
[CSS] Flex/Grid Layout Modules, part 11

只好多寫一點廢話了。

間隔、間隔、...]]> 來到了 30 天的三分之一，然後我才剛講完網格容器而已，但是，剩下的東西也不多了，好像要寫滿 30 篇難度有點高。

只好多寫一點廢話了。

---

間隔、間隔、間隔

當兵有呼過拐拐的應該知道我在講什麼。

這邊的 gap 其實跟 Flexbox 其實是同一套，而且特性也一樣。

Gaps Between Boxes
CSS Box Alignment Module Level 3

不要問我為什麼大家都跟 Box Alignment Module 有關。如果大家有耐心去看官方文件的話，會發現 Box Alignment Module 超級無敵霹靂長，幾乎是囊括了所有跟對齊有關，跟對齊沒有那麼相關，跟對齊幾乎無關的東西（疑）。

例如 gap 我就不懂跟對齊有什麼關係？

基本上在 Grid 容器裡面，間隔的寫法跟 Flexbox 如出一轍，

.grid-container {
    display: grid;
    
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    
    column-gap: 10px;
    row-gap: 10px;
}

與 Flexbox 相同的地方是，間隔的尺寸並不會被壓縮，且也是算在整個容器尺寸裡面。所以，當你設定了容器尺寸的時候，請留意 gap 的尺寸是否會壓縮到你的 Grid 單元，爾或是，你的 Grid 單元與 gap 的尺寸總和，是否能容納在 Grid 容器內。

同樣的狀況，當你使用 repeat() 的 auto-fill 或 auto-fit 的時候，也會因為 gap 的尺寸設定，而導致你的每個欄或列能放入的數量不同。

我們快速的舉幾個例子給大家看看，

.grid-container {
    display: grid;
    
    grid-template-columns: repeat(3, 200px);
    grid-template-rows: repeat(3, 200px);
    
    column-gap: 10px;
    row-gap: 10px;
    
    width: 600px;
    height: 600px;
}

在這種時候，其實你的 Grid 容器真實尺寸是，

200px x 3 + 10px x 2 = 620px

而你將容器設定為 600px 時，基本上他還是會依照 Grid 的規範畫出容器，但是容器本身會限制在 600px 的尺寸內，

當然，你也可以使用彈性尺寸設計來避開這件事情，但是，由於 gap 的絕對優勢，所以你的 Grid 單元會被 壓縮。壓縮的方式跟分配 fr 的方式是雷同的，但這裡的彈性尺寸總和需要扣除固定尺寸的限制，

Grid 單元尺寸 = <剩餘空間> * <彈性尺寸> / <彈性尺寸總和（扣除固定尺寸的情況）>

剩餘空間 = 容器總空間 - (若存在則扣除固定尺寸單元) - gap 尺寸

舉例來說，

.grid-container {
    display: grid;
    
    grid-template-columns: minmax(200px, 1fr) 2fr 1fr;
    
    column-gap: 10px;
    
    width: 600px;
}

最終我們得到的後面兩個尺寸就分別是，

• 2fr 最終尺寸 (600 - 20) * 2 / 3 = 253.33px
• 1fr 最終尺寸 (600 - 20) * 1 / 3 = 126.66px

為什麼？

因為上述的設定一定會觸發 minmax() 並且將最小值鎖定在 200px。

另外針對 auto-fill, auto-fit 的例子，

.grid-container {
    display: grid;
    
    grid-template-columns: repeat(auto-fill, 100px);
    
    column-gap: 10px;
    
    width: 600px;
}

在 剩餘空間不足 的情況下，就會少了一個間隔，根據 w3c 官方 Grid gutters 的定義，在 Grid 容器尺寸無法放入更多的 Grid 單元，所以對於隱性軌道來說，他是一個空軌道，等同於 上一個 軌道是這個容器的最後一個軌道，所以在這邊的間隔並不會出現。

舉體來說 auto-fill, auto-fit 間隔的出現，可以用以下的方式解釋，

• 剩餘空間不足，不出現最後一個間隔
• 剩餘空間足夠，出現最後一個間隔

同理 auto-fit 也是一樣的狀況，以下的例子是當 剩餘空間足夠 時，你的間隔就會出現，

另外，官方雖然是這樣講，但實際上瀏覽器（除了 Firefox）並沒有這麼做，

When a collapsed track’s gutters collapse, they coincide exactly—the two gutters overlap so that their start and end edges coincide. If one side of a collapsed track does not have a gutter (e.g. if it is the first or last track of the implicit grid), then collapsing its gutters results in no gutter on either “side” of the collapsed track.

以下是 Webkit 渲染收合軌道時的情況，

以下是 Grcko 渲染收合軌道的情況，

個人覺得這是一種 Grid Layout 的 Bug，截至目前為止（2021/09/15），只有 Firefox 渲染引擎 Gecko 是比較正常的結果，有興趣的可以看這個小討論，

[css-grid] Collapsed grid tracks and content distribution #1140

最後稍微介紹一下 gap 的相關設定方式，

樣式	可用值	預設值
column-gap, row-gap	normal 或長度單位或比例（%），不可為負值	normal
gap	<'row-gap'> <'column-gap'>?	上述兩者縮寫，沒有預設值

---

最後的對齊

這件事情其實也是屬於 CSS Box Alignment Module 的部分，在 Flexbox 也通用，至於為何留到 Grid 才講？因為我覺得這個東西在 Grid 雷的程度比 Flexbox 要精彩許多。

在我們定義對齊的時候，有一組關鍵字可以使用，叫做 safe 與 unsafe，他是用來定義你的對齊是否在 安全的範圍 內操作。

什麼叫做 安全的範圍？

我們先舉個簡單的例子，當我這樣做的時候，你就會發現奇怪的現象，

.grid-container {
    display: grid;
    
    grid-auto-rows: 100px;
    
    align-items: center;
}

.grid-item:first-child {
    height: 200px;
}

這個現象在 邏輯上 是合理的，由於 align-items 的本意是對齊每個 Grid 單元，然後使用了 center 來 垂直置中 這個 Grid 單元。所以，他出現了 超出 Grid 容器 的狀況，根據邏輯定義上來說，他沒有問題。

但是，視覺上來看就是所謂的 跑版。

所以，就有了所謂的 溢位定位（overflow position） 的設定，就是剛剛提到的關鍵字，

• safe 倘若對齊元件超過（產生溢位）對齊容器，則該元件會採用 start 方式對齊
• unsafe 不採取任何動作，使用原有設定做呈現，由渲染端自己決定

預設是 unsafe 啦。所以不要太崩潰，如果發生溢位狀況的話，可能得先重新檢視一下網格設計是否合理，你硬要用 safe 也不是不行，只要達成你的效果即可。

---

小記

今天一個小段落就大家輕鬆一點，目前來說大抵上把 Grid 容器的部分都交代的差不多了，接下來可以開始講 Grid 單元，Grid 單元內巢狀 Grid 容器之類的事情，然後又是無限對齊、留白、定位等問題（燦笑）。

---

目錄與小節：
[CSS] Flex/Grid Layout Modules, part 1

---

部落格同步放送：
[CSS] Flex/Grid Layout Modules, part 10

]]> 閃光洽 2021-09-15 12:00:19 https://ithelp.ithome.com.tw/articles/10263009?sc=rss.iron https://ithelp.ithome.com.tw/articles/10263009?sc=rss.iron 你以為網格格線告一個段落後，我會開始講網格單元嗎？當然不是啊，我們網格容器都還沒講完呢。剩下一點小東西稍微交代一下就可以了。

放心雷沒有很多。

---

容器中...]]> 你以為網格格線告一個段落後，我會開始講網格單元嗎？當然不是啊，我們網格容器都還沒講完呢。剩下一點小東西稍微交代一下就可以了。

放心雷沒有很多。

---

容器中的隱性軌道設定

前一篇提到隱性格線，在容器中，也有兩個樣式設定是 專門 給隱性軌道使用的。

樣式	預設值
grid-auto-rows	auto
grid-auto-columns	auto

由於兩個設定的可使用數值都一樣，我直接拿出來外面講比較快，

• 相對尺寸 %
• fr
• min-content
• max-content
• auto
• minmax()
• fit-content()

以上這幾種都是給隱性軌道使用，我快速舉個例子，

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    
    grid-auto-rows: 300px;
}

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>

    <!-- 實際上只設定了一列，但這邊是第二列資料 -->
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
</div>

同樣的道理 grid-auto-columns 也是一樣的操作方式，具體案例我就不再寫一次了。

---

軌道尺寸詳解

回到 Grid 容器軌道上，我們知道軌道除了可以設定常見的單位尺寸外，現在又多了 fr 可以使用。然而，在 Grid 容器當中，我們還有這些方法可以操作，

CSS 關鍵字/運算方法	說明
min-content	設定在軌道中所有最小內容單元的尺寸中，取最大的尺寸
max-content	設定在軌道中所有最大內容單元的尺寸中，取最大的尺寸
fit-content(limit)	接收一個限制數值 limit，並套入公式 max(minimum, min(limit, max-content))，其中 minimum 代表了軌道中的最小尺寸，通常會使用 auto 關鍵字，但多數情況下會符合 min-content 的尺寸。
minmax(min, max)	定義一組最小、最大值的區間來當作尺寸，他是一個彈性的範圍。如果兩個數值寫反了，會直接取用最小值。

其中 min-content, max-content 在實務上比較難以看出效果，針對官方所提出的演算法則來看，其實也看不太出端倪。我舉一個稍微複雜一點的設定，然後我們來看看運作邏輯。

grid-template-columns: 200px 1fr max-content minmax(min-content, 100px);

假設我們的 Grid 容器有這樣的欄設定，那麼計算順序為，

1. 從 容器邊緣 起算。這很重要，因為 不是每個人的邊緣都是左上角。
2. 邊緣畫出第一條線，第一個欄位是 200px 寬。
3. 畫出第二條線，第二個欄位是使用剩餘空間計算 1fr 的尺寸。
4. 畫出第三條線，第三個欄位是在該軌道中任何一個 Grid 單元，取最大尺寸。
5. 畫出第四條線，第四個欄位是在該軌道中任何一個 Grid 單元，從最小尺寸中取一個最大值，當作最小值，並且以 100px 當作最大值來做範圍運算。

從最小尺寸中取一個最大值 到底是什麼神邏輯？

我用實際案例解釋給你看，首先我們先設計一個第一欄使用 min-content 的容器，

.grid-container {
    display: grid;
    grid-template-columns: min-content repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    
    width: 100%;
    height: 500px;
}

他是一個 3x3 的容器，其他兩個欄位都使用彈性空間，列的部分也全部使用彈性空間。然後我們針對第一欄的部分來放一些資料，也就是我們的 1, 4, 7 這三個地方要放一點特別的資料進去。

<div class="grid-container">
    <div class="grid-item">
        <p>放一點特別的資料進去</p>
    </div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>

    <div class="grid-item">
        <p>放一點特別的資料進去</p>
    </div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>

    <div class="grid-item">
        <p>放一點特別的資料進去</p>
    </div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
</div>

會後他會變成這樣，

你的 Grid 單元內容超出 height: 500px 的設定了，對，這算是 min-content 的一個特別的地方，他所謂的 最小內容 是利用文字特性來做計算的。所以，當你使用了這項設定，那們請確保你的文字內容真的是你想要呈現的方式。

另外，你的容器若沒有特定尺寸，基本上 Grid 單元還是以填滿整個 Grid 容器為目標去填滿的。所以如果不指定尺寸，基本上不會有上面 Grid 單元超出容器的狀況。

接著，我們來加一點料進去，剛剛有說了，他是取用 在軌道中所有最小內容單元的尺寸中，取最大的尺寸 來用，那麼如果我們放了一個比較困難的文字進去，

<div class="grid-container">
    <div class="grid-item">
        <p>放一點特別的資料進去</p>
        <p>Internationalization and localization</p>
    </div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>

    <div class="grid-item">
        <p>放一點特別的資料進去</p>
    </div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>

    <div class="grid-item">
        <p>放一點特別的資料進去</p>
    </div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
</div>

那麼他的結果大家可以猜到了嗎？

那這樣跟 max-content 到底有什麼差別？

別急，我們把 Grid 容器換成 max-content 再來看看到底發生什麼事情，

.grid-container {
    display: grid;
    grid-template-columns: max-content repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

其他的內容我們都不更動，我們來看看 max-content 怎麼呈現我們的結果，

這樣可以稍微理解 min-contetn 與 max-content 之間的差異了吧。當然，這種演算方式並無法避開區塊元件的佔用尺寸問題。換句話說，

當 Grid 單元中有區塊元件（Box Module）並指定尺寸，且超出了 min-content 的計算尺寸，那麼，這個地方的 min-content 結果就會跟 max-content 沒什麼太大區別。就如同上面所描述的，所謂 min-content 是 在軌道中所有最小內容單元的尺寸中，取最大的尺寸 來使用，所以區塊元件佔用，又超出計算尺寸，就會被當成是 min-content 的最終結果。

舉個例子給大家看看，這次就不附上圖片了，請大家自行想像一下。

<div class="grid-container">
    <div class="grid-item">
        <p>放一點特別的資料進去</p>
    </div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>

    <div class="grid-item">
        <p>放一點特別的資料進去</p>
        <img src="...">
    </div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>

    <div class="grid-item">
        <p>放一點特別的資料進去</p>
    </div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: min-content repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

.grid-item img {
    display: block;
    width: 300px;
    height: 300px;
    object-fit: cover;
}

在這種狀況，無論你是使用 min-content 或 max-content，你的第一個欄尺寸基本上就是 300px，除非你的內文計算尺寸能超過，否則這個 300px 就會是最小（也可能是最大）尺寸。

---

fit-content(limit)

其實我們把他拆解出來會比較容易理解，

max(minimum, min(limit, max-content))

其中 max-content 上面有解釋過了，我們只要專注在 limit 與 minimum 這兩個地方就好。首先，limit 是你傳進去的數值，所以如果我們這樣寫，fit-content(300px) 那他就等同於，

fit-content(300px) = max(minimum, min(300px, max-content))

問題來了，那個 minimum 是什麼呢？在多數情況下，他是使用 auto 這個關鍵詞來讓裝置自動決定運算尺寸，通常，在最常見的情況下，他會是 min-content 的數值。會不會有意外？我不能跟你保證永遠不會。因為在 auto 的定義裡面，還是有一些貓膩。

Automatic Minimum Size of Grid Items

CSS Box Sizing Module Level 3

總歸一句，這邊的 minimum 所使用的 auto 會採用的是取最小值的部分，而在 Grid 自動取得最小值（如 min-content 的演算法）所使用的大方向有這三種順序，

1. 採用特定（指定）尺寸（specified size）
2. 採用演算（轉換）尺寸（transferred size）
3. 採用內容（文本）尺寸（content size
4. 如果以上都沒有則為 0

所以，我們剛剛在解釋 min-content 的範例中，我們放了一張圖片，那張圖片對於 Grid 單元就屬於轉換內容的尺寸，符合第 2 點的演算方式。所以你會取得該單元的 min-content 就是內容佔有的尺寸。

如果你不寫 fit-content() 的話，是可以避開 min-content 的問題。就是把他拆成上面的公式就好了，如果你真的想要使用，又不想踩到 min-content 可能會發生的狀況的話。

總結一句話，所謂的 fit-content() 的意思是，

類似 min-content 但如果比 min-content 還大就取比較大的。
然後如果掉入 min-content 的問題，就等於 max-content。

---

minmax(min, max)

我們在 Part 7 提到 1fr 其實會等於 minmax(auto, 1fr) 大家還記得嗎？

如果忘了可以回去 Part 7 的文章 重看一次。

然後這邊的 auto 一樣會有剛剛 fit-content() 的問題，就不再贅述。這個 CSS 運算方法其實很容易理解，他就只是一個取出一個範圍尺寸，然後依照這個範圍尺寸變動欄或者是列的尺寸。對於需要彈性應用，但又不想過大（或過小）的網格單元來說很方便。

需要注意的點就是，

• 最大、最小值不要寫反，寫反等同於 minmax(min, min)
• 容器單元指定超出此範圍的尺寸不干擾網格系統
• 容器單元指定超出此範圍的尺寸不干擾網格系統
• 容器單元指定超出此範圍的尺寸不干擾網格系統

第二點很重要所以說三次！

容器單元指定超出此範圍的尺寸不干擾網格系統

舉例來說，

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(300px, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

.grid-item:first-child {
    width: 1200px;
}

最終你會得到這樣的結果，

所以，當你在 Grid 容器中使用 minmax() 時，請特別注意你的 Grid 單元尺寸的狀況，否則他是不會排在位置上的，另外，如果你的 1fr 有與 minmax() 混用的情況，請也特別留意 Grid 單元尺寸，因為在這個時候所謂的 剩餘空間 可能跟你想像的不太一樣。

---

容器單元流向

官方對於此有一份演算法說明，

Grid Item Placement Algorithm

我覺得比較詫異的是，官方對於容器單元流向，僅說明是 針對 隱性軌道的網格單元，但是實際上是整個容器都受用，無論你是不是隱性軌道。但，其實這樣說起來也是合理的，你總不可能一般軌道是一種流向，然後隱性軌道是另外一種流向吧。

控制容器單元流向只有一個樣式，

樣式	可用值	預設值
grid-auto-flow	[row, column], dense	row

row 跟 column 就很單純，可以想成對於欄或列的 Grid 單元 優先 擺放流向。以預設值 row 來說，他就是由左至右（非 RTL 文本模式），由上到下的狀況來排列。而換成 column 則是由上到下，由左至右，這種方式跟 Flexbox 在交換主要軸、交叉軸的情況很相似。

至於 dense 這個關鍵字，則是可以單獨，或搭配 row, column 使用的，例如，

.grid-container {
    display: grid;
    
    grid-auto-flow: dense;
    /* 或是 */
    grid-auto-flow: row dense;
}

所謂的 dense 的演算方式是採用密集（緊湊）排列法，當你的 Grid 單元尺寸不同時，預設的排社方式是遇到空間不足就會往下（row 方向）或往右（column 方向）繼續排列，這個時候，在某些區域就會出現空白的區塊，舉例來說，

.grid-container {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    
    grid-auto-flow: row dense;
}

.grid-item:nth-of-type(1),
.grid-item:nth-of-type(2) {
    grid-column: auto / span 2;
}

此時當你使用 dense 的時候，他就會變成，

這種緊湊排版很類似以前流行過的 Masonry Layout，也就是我之前寫過的 瀑布流難題，這個基本上在 Grid 上面可以得到一個還算不錯的解法。

---

容器單元的填滿

最後我們來聊填滿這件事情，大家前面應該看了非常多 repeat() 的使用，對，最後我們來聊一下關於 repeat() 這件事情。他的目的就是重複你所設定的軌道，除了重複次數以外，他還有兩個特殊關鍵字可以使用。

重複目標	使用方式
網格軌道	repeat(次數, <軌道尺寸> 或加上 <格線名稱>)
固定尺寸	repeat(次數, <固定尺寸> 或加上 <格線名稱>)
auto-fill	repeat(auto-fill, <固定尺寸> 或加上 <格線名稱>)
auto-fit	repeat(auto-fit, <固定尺寸> 或加上 <格線名稱>)

軌道尺寸 與 固定尺寸 僅差在軌道尺寸可以使用 fit-content() 而固定尺寸至多能使用 minmax()，這是兩者唯一差別。所以以下寫法基本上都是合法的，

.grid-container {
    grid-template-columns: repeat(3, 1fr);
    grid-template-columns: repeat(3, 100px);
    grid-template-columns: repeat(3, [foo] 100px [boo]);
    grid-template-columns: repeat(3, minmax(auto, 1fr));
    grid-template-columns: repeat(3, minmax(100px, 300px));
    grid-template-columns: repeat(3, minmax(auto, 1fr));
    grid-template-columns: repeat(3, fit-content(100px));
    
    grid-template-columns: repeat(auto-fit, 100px);
    grid-template-columns: repeat(auto-fill, minmax(auto, 200px));
}

關於 auto-fill 與 auto-fit 兩者的差異，在於是否 填滿 容器。我們直接用圖片來解釋會比較容易理解，

兩者的差異在於，

• auto-fill 會盡可能在網格容器中填滿所設定的網格軌道
• auto-fit 網格軌道則是僅滿足需要用到的網格單元

共同點是，你的 Grid 容器隨時都有可能產生剩餘空間。

---

小記

其實網格容器還是有一些小地方可以講，但那個實在太冷門，我留到最後再提好了。

---

目錄與小節：
[CSS] Flex/Grid Layout Modules, part 1

---

部落格同步放送：
[CSS] Flex/Grid Layout Modules, part 9

]]> 閃光洽 2021-09-14 11:32:12 https://ithelp.ithome.com.tw/articles/10262704?sc=rss.iron https://ithelp.ithome.com.tw/articles/10262704?sc=rss.iron

我先問一個問題，如果我有一個 3x3 的 Excel 方塊，請問我有幾條格線？

Grid 容器中的格...]]>

我先問一個問題，如果我有一個 3x3 的 Excel 方塊，請問我有幾條格線？

Grid 容器中的格線是整個排版定位中的靈魂，但，他沒有 Excel 那麼單純。

---

網格格線

Grid 容器的靈魂就是網格格線，我們在宣告一個 Grid 容器的時候，每個方塊就會產生相對應的格線，而這些格線當中還會有先前提及的隱性格線（implicit grid）的設計。

我們從 Grid 容器先看起，首先我們定義一個 3x3 的 Grid 容器，

.grid-container {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
}

當然，如果你很明確的定義你的容器，那麼他就會給你很明確的網格格線。如果你沒有、或缺少定義網格區塊的話，那麼就會落入隱性格線的設定裡面。我們這邊暫且先不談，後面會繼續提及隱性格線的相關事宜。

首先，既然格線有數字，那麼那些數字代表了什麼意思？

• 每個 Grid 單元的 開始 與 結束 的地方
• 依照格線的數字可以定義一個 Grid 單元的尺寸
• 可以使用負數
• 可以命名
• 命名格線請避開 -start 與 -end 結尾

這麼一來，我如果要做一個 Grid 單元像是這樣，

.grid-item {
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 4;
}

我還沒介紹網格單元的基礎，這邊請先當作你知道這件事情（欸）。

接著我們再回來看 Grid 容器設定，由於格線可以命名，所以我們可以這樣寫，

.grid-container {
    display: grid;
    grid-template-rows: [first] 1fr [second] 1fr [boo] 1fr [last];
    grid-template-columns: repeat(3, [foo] 1fr [boo]);
}

由於我中間混合了 repeat() 的寫法，所以他會有一點點不一樣，

雖然說格線有了名字，但原本的數字還是可以使用的。既然有名字，那麼我們的 Grid 單元就能使用名字來決定要使用的區域，

.grid-item {
    grid-row-start: second;
    grid-row-end: last;
    grid-column-start: foo 2;
    grid-column-end: boo -1;
}

好的，關於 <命名格線> <數字> 的結構請先當作你知道這件事情（燦笑）。

由於我使用了 repeat() 的關係，所以你會發現同一條格線會有兩個名字，在格線的命名上這樣是合法的，也就是說一條格線可以有好幾種名字，如果你不覺得煩的話可以這樣做沒關係。

以下是奇怪的例子請不要亂用，

.grid-container {
    display: grid;
    grid-template-rows: [hello world please begin here] 1fr [second] 1fr [boo] 1fr [last];
    grid-template-columns: repeat(3, [foo boo too] 1fr [xoo]);
}

---

隱性格線 The Implicit Grid

這件事情其實是一種輔助的設計，當你的 Grid 容器設定並沒有辦法滿足一些使用狀況的時候，Grid 的渲染引擎會加上這種隱性格線來當作輔助，目的是用以確保整個網格系統的完整性。簡單來說，就是當你的網格元件超出了容器設定時，就會產生出隱性網格軌道，然後網格軌道就會帶著網格格線出現。

The Implicit Grid

官方的說明再貼一次，雖然不一定看得懂。

至於，哪些狀況會產生隱性網格軌道（隱性格線）呢？

合理的說法是，

• 網格單元超出了網格容器的設計

所謂的 超出 了網格容器的設計，代表的就是在設定上的資料量，超過了原有網格容器可容納的網格單元數量。就像是 3x3 的方格，你硬要放入 4x4 的資料的意思一樣。網格系統為了確保網格軌道的正確性，就會增加軌道來放入這些資料，這些 被增加 的軌道，就是所謂的隱性網格軌道（Implicit Grid Tracks），而這些軌道的產生就會帶來了隱性網格格線（Implicit Grid Line）。

但是，

實際上（現實面）的狀況是，

• Grid 容器設定不完整
• Grid 單元指定了不存在的網格格線（或網格單元）
• 使用命名 Grid 單元，卻不存在於 Grid 容器規範中

雖然說這些隱性格線目的是為了確保 Grid 容器的完整性，但是，我覺得更多的部分應該是要 防止人類隨意亂寫樣式造成的錯誤。我們可以來看看這些例子，

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 100px);
}

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>

    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>

    <!-- 實際上只設定了兩列，但這邊是第三列資料 -->
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
</div>

在沒有定義 grid-template-rows 的情況下，所有的列（row）的產生都算在隱性軌道頭上。

爾或者是指定了一個奇怪的網格軌道，逕而產生了隱性網格軌道，造成後面網格呈現出現不同的流向，

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
}

.grid-item:first-child {
    grid-column: 1 / 5;
    grid-row: 1 / 2;
}

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>

    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
</div>

這種情況是最可怕的，由於隱性軌道跟一般網格軌道的功能是一樣的，所以，當你原本設想的網格容器 3x3 的區域，如果因為設定錯誤，他就會變成 4x3 的網格容器。是的，網格系統很貼心的幫你把你要的區域給畫出來了。

驚不驚喜，意不意外。

另外，在容器使用 grid-template-areas 的設定方式時，由於指定名稱與其網格單元名稱的配對不合（或沒有配對），也會產生隱性格線，而且，在更複雜的網格單元設定時，更容易會造成不必要的隱性格線產生。

這邊必須要先提及，grid-template-areas 有一個 附加特性，

所有命名區塊的位置，都會產生 4 條隱性命名格線，也就是欄（row）的方向兩條，列（column）的方向兩條。

我們先看範例，後面再來講解到底為什麼。這個時候，我們還是請一隻貓來切版，

.grid-container {
    display: grid;
    grid-template-areas:
        "nav nav nav"
        "sidebar main main"
        "sidebar main main";
        
    width: 500px;
    height: 500px;
}

.nav {
    grid-area: nav;
}

.sidebar {
    grid-area: sidebarrrrr;
}

.main {
    grid-area: main;
}

<div class="grid-container">
    <nav class="grid-item nav">1</nav>
    <aside class="grid-item sidebar">2</aside>
    <main class="grid-item main">3</main>
</div>

最終的結果會是這樣，

命名網格最可怕的地方在於，你的整個 Grid 容器尺寸不變，然後會依照比例 均分 這些網格格線所劃分出來的區域，無論你是不是隱性網格格線都一視同仁。

之所以名字打錯會造成這個問題，主要還是命名網格單元設定的 附加特性 有關。以上述的例子來看，我們單純看欄（column）的部分就好，畢竟是正方形轉過去就可以通了。

首先是 nav nav nav，在欄方向有兩條線，名稱分別是，

[nav-start], [nav-end]

在列方面也會有兩條線，名稱跟欄一樣。其他的區塊也分別都會有四組網格格線，如同我剛剛所描述的。那麼，我們再來看看那個不存在於命名區域設定的網格單元 sidebarrrrr，

首先，他一樣會有四條線，

欄方向 [sidebarrrrr-start], [sidebarrrrr-end]
列方向 [sidebarrrrr-start], [sidebarrrrr-end]

上面的計算結果，我們發現網格格線的計算數字被標記到了 6，原本只有 4 而已，原因是，你一個隱性命名網格單元，每個方向都會產生 2 條線，然而，他並不會將 上一個 網格單元的最後一條線做合併的動作，換句話說，

無論是一般命名網格單元還是隱性命名單元，他的網格格線都是獨立的。

所以我們從欄方向來看 sidebarrr 這個單元，就很容易理解為何變成 6。因為對於 nav nav nav 這個命名區塊來說，他的網格格線為 [nav-start], [nav-end]，但由於隱性命名單元的發生，所以，單就 nav nav nav 這個區塊來看，他的網格格線就變成了，

[nav-start], [nav-end], [sidebarrrrr-start], [sidebarrrrr-end]

由於 [nav-start] 等同於 網格格線數字 1，而 [nav-end] 為 4，所以後面增加的隱性命名區塊網格格線，就變成了 5 跟 6 了。

當然，你不要打錯名字就好了。

另外，如果在命名 Grid 單元上，使用了錯誤的網格區域設定，雖然不一定會造成隱性網格區域的產生，但一樣會打壞原本網格單元擺放的邏輯。

---

使用命名格線與隱性格線的雷

前面有提到了格線可以取名字，但是不建議你的名字當中有 -start 或 -end 結尾。原因在於，在 Grid 格線系統中，他會使用 -start 與 -end 這兩個關鍵字來組合你的網格名稱，用以找到確切的網格格線位置。

又是一個小貼心，然後雷死你不償命的。

我們舉一個實際的例子來看，

.grid-container {
  display: grid;
  grid-template-columns: [first] 100px [foo foo-start] 100px [foo-end] 100px [last];
  grid-template-rows: repeat(2, 100px);
}

.grid-item:first-child {
    grid-column-start: first;
    grid-column-end: foo;
    
    grid-row: 1 / 2;
}

聰明如你，一定會覺得，阿不就是把第一個 .grid-item 放在第一格 100x100 的地方，這有什麼好困難的？

來，我們來看實際的結果，

驚不驚喜，意不意外。
我雷死你這小王八蛋！

這是網格格線一個不知道是不是因為隱性命名網格區域會用到 -start, -end 的關係，索性將這兩個字也納入了一般命名網格格線的規則裡。為什麼？我上面之所以把 grid-column 分開來設定的原因，就恰巧可以解釋這件事情。

• grid-column-start 如果使用命名格線，他會去找看看有沒有叫做 <我格線>-start 的命名格線，如果找不到才會先去找格線名字相同的，例如 <我格線>。
• grid-column-end 跟上面的邏輯一樣邏輯同上，只是後面改成 <我格線>-end。
• grid-row-start, grid-row-end 邏輯同上。
• grid-column, grid-row 這兩個縮寫的邏輯也同上。

所以，我上面的例子是這樣命名的，

grid-template-columns: [first] 100px [foo foo-start] 100px [foo-end] 100px [last];

依據網格格線的規則，他會先去找 [foo-end]，所以就會有上面圖片中的效果。

為什麼不是先找 foo 而是先找 foo-end？

w3c 官方說的，不爽你可以去他 Github 發 PR（欸

Line-based Placement
First attempt to match the grid area’s edge to a named grid area: if there is a grid line whose line name is -start (for grid--start) / -end (for grid--end), contributes the first such line to the grid item’s placement.

所以說，沒事請不要亂用 -start 或 -end 來命名你的格線，他會 優先配對。

另外，如果使用了不存在的格線名稱，那麼你的格線系統就會多一個尺寸為 0 的軌道，然後多一條線出來。跟剛才的命名單元一次多兩條不一樣。這個部分一樣會破壞 Grid 原本擺放單元的位置，舉例來說，

.grid-container {
  display: grid;
  grid-template-columns: [first] 100px [foo] 100px [boo] 100px [last];
  grid-template-rows: repeat(3, 100px);
}

.grid-item:first-child {
    grid-column-start: first;
    grid-column-end: qoo;
    
    grid-row: 1 / 2;
}

總括來看，其實我並沒有特別覺得網格系統很貼心，而這些真的只是為了維持網格展示能正常的一些補救（防呆防蠢不防雷）的作法。

對於不明就裡的人來說，被雷到應該只是剛好。

---

小結

其實講下來，應該跟格雷的陰影差不多。格線如果你都很規矩的操作，基本上不太容易出亂子。

---

目錄與小節：
[CSS] Flex/Grid Layout Modules, part 1

---

部落格同步放送：
[CSS] Flex/Grid Layout Modules, part 8

]]> 閃光洽 2021-09-13 09:41:55 https://ithelp.ithome.com.tw/articles/10262449?sc=rss.iron https://ithelp.ithome.com.tw/articles/10262449?sc=rss.iron 我們繼續來深入關於 Grid 容器的相關樣式設定。雖然目前 CSS 框架在多數情況下並不需要特別在意，但，就老話一句，誰在意誰痛苦。

踩到雷而且你還不知道...]]> 我們繼續來深入關於 Grid 容器的相關樣式設定。雖然目前 CSS 框架在多數情況下並不需要特別在意，但，就老話一句，誰在意誰痛苦。

踩到雷而且你還不知道為什麼

---

新的單位 fr

從 Grid 出現之後，我們有一個新的尺寸單位可以使用，他叫做彈性長度（flexible length），在 CSS 當中，因應這個彈性長度，所以就有了新單位 fr，而 fr 的全名為 彈性軌道（flexible tracks），或者你會聽到有人稱他為 彈性係數（flexible factor）。

這個單位的定義與使用狀況在這邊稍微給大家解釋一下，

1. 分配 剩餘空間
2. 計算方式 <fr 係數> * <剩餘空間> / <所有 fr 係數總和>
3. fr 會因為內容計算而產生不同寬度
4. minmax() 可以用於計算 fr
5. calc() 不能使用 fr 與其他單位數值混合運算
6. fr 在介於 0 與 1 之間的小數時有其特殊計算方式

首先，我們來定義一下何謂 剩餘空間？

好的，所以我們的容器如果是一個固定尺寸的空間，我們舉個簡單的數字來方便大家裡解，

.grid-container {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: repeat(4, 1fr);
    
    width: 1000px;
    height: 1000px;
}

這樣我們會獲得一個 1000x1000 尺寸的容器，然後裡面有 4x4 總共 16 個 Grid 單元空間。由於上述的公式，我們經過簡單的四則運算，

1 * 1000px / 4 = 250px

所以我們可以很明確的知道，我們所畫出來的 Grid 單元空間有 250px 寬，然後 250px 高。在這個地方很容易理解，但，我們暫時 不考慮 Grid 單元內容會造成的影響。這個在後面提到尺寸的時候會再詳細描述。

另外，關於介於 0 與 1 之間的 fr 設定，由於這邊解釋起來相當繞口，所以我先舉幾個例子，然後大家先看看圖，後面我再來解釋到底發生了什麼事情。

首先，我們一樣使用固定尺寸空間，然後稍微換一下裡面的東西，

.grid-container {
    display: grid;
    grid-template-rows: repeat(3, 1fr) 0.5fr;
    grid-template-columns: repeat(3, 1fr) 0.5fr;
    
    width: 1000px;
    height: 1000px;
}

這樣，由於分配的 剩餘空間 還是使用 1000px 整份去切割，所以基本上這個還是符合我們剛剛所說的剩餘空間分配公式，

關於 1fr 的部分是：
1 * 1000px / 3.5 = 285.714px

關於 0.5fr 的部分是：
0.5 * 1000px / 3.5 = 142.857px

接著，我們來看看搭配了非彈性空間單位的情況，

.grid-container {
    display: grid;
    grid-template-rows: repeat(3, 150px) 0.5fr;
    grid-template-columns: repeat(3, 150px) 0.5fr;
    
    width: 500px;
    height: 500px;
}

根據上述的公式，我們可以簡單計算 剩餘空間 如下，

500px - 150px * 3 = 50px

所以這邊我們還可以預期的到，我們的 0.5fr 是使用剩餘空間來分配，

0.5 * 50 = 25px

接著，當我們出現了第二個小數點的 fr 單位時，

.grid-container {
    display: grid;
    grid-template-rows: repeat(2, 150px) 0.5fr 0.5fr;
    grid-template-columns: repeat(2, 150px) 0.5fr 0.5fr;
    
    width: 500px;
    height: 500px;
}

當我們天真的以為，兩個 0.5fr 就會幫我把剩餘空間各半分配。但是，實際上並不會這樣運作，你會看到 Grid 容器幫你把剩餘空間全部分配完畢了。這邊的計算方式很類似 Flexbox 的 flex-grow 在介於 0 與 1 的計算方法，但稍微有點不同。

他的運作方式是，

當 fr 介於 0 與 1 之間時，軌道尺寸計算會使用非 100% 的剩餘空間做計算。其計算的方式，是先假定內容最大尺寸（max-content）來當作彈性係數，此時會產生一個假想的 1fr 寬度來做運算，最後再將空間分配給所設定的彈性係數，最後會得到一個 最終分配係數。

如果把他想成數學的話會比較簡單，

<剩餘空間> / <fr 單位數量> * <fr 係數> = <最終分配 fr 係數>

所以我們剛剛的設定最後會得到什麼 Grid 單位空間呢？

200px / 2 * .5 = 1fr

所以，最後剩餘空間會變成兩個 1fr 去分配。而不是你所想像的，有兩個 Grid 單位空間，然後各佔一半的事情發生。

為什麼？

fr 尺寸這樣的設計，是為了在無指定容器尺寸的情況下，避免分配狀況出現問題，進而搭配 max-content 與假想 1fr（hypothetical 1fr size）的方式來均分剩餘空間。重點在於確保彈性尺寸在 Grid 軌道上有確切尺寸，且能還能依照所設定的比例去分配空間。

再來一個比較討厭的例子，

.grid-container {
    display: grid;
    grid-template-rows: repeat(2, 150px) 0.25fr 0.5fr;
    
    width: 100%;
}

你可能會以為他跟剛剛一樣會把空間填滿？並不會喔！你會獲得一個 沒有分配的剩餘空間，然後基本上他雖然屬於 Grid 容器，但他 永遠不會被使用到。

因為所有介於 0 與 1 之間的彈性係數設定，都僅會拿剩餘空間來做重新分配，且不會填滿（也就是非 100%）剩餘空間的計算方式，來重新分配，所以出現沒有分配的剩餘空間是很有可能發生的事情。

所以，當你在使用 fr 的時候，如果不確定你在幹嘛，請不要使用介於 0 與 1 之間的設定。

最後，來提及內文影響 Grid 單元的部分，假設我們設定了一個很簡單的 Grid 容器，

.grid-container {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
}

我們有一個很美好的 Grid 容器，然後我們請一隻貓來輸入內容，

<div class="grid-container">
    <div class="grid-item">
        我的第一個 Grid 內文
    </div>
    
    <div class="grid-item">
        我的第一個 Grid 內文
    </div>

    <div class="grid-item">
        我的第一個 GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGrid 內文
    </div>

    <div class="grid-item">
        我的第一個 Grid 內文
    </div>
</div>

說好的 1fr 會均分呢？

誰跟你說好，格線系統並沒有跟你說一定會均分。

這個問題起源在這裡，

[css-grid] Reconsider the meaning of 1fr #1777

翻成白話的意思就是，對於 1fr 實際上的預設定義是 minmax(auto, 1fr)，所以這就很顯而易見，當那個 auto 生效的時候，就會取 max-content 來當作一個尺寸。這也就是為何你的 1fr 不會均分的原因。

所以，後來就出現了 minmax(0, 1fr) 的寫法，我不知道這算不算一種 Workaround，但是，Workaround 雖然可恥，但是相當有用！

.grid-container {
    display: grid;
    grid-template-rows: repeat(4, minmax(0, 1fr));
}

請注意，當你使用 minmax(0, 1fr) 的時候，你的內文會被切割，請自行使用換行相關的樣式，將你的內文做適當的換行。當然，這個問題會發生在兩個軸方向上，換句話說，當你在列（row）相關的地方使用 fr 均分時，也會發生一樣的問題。

但，由於我們的文件流向大部分是由上到下，所以比較少特別限制 高度 的部分，但，這還是取決於你的使用目的，只是在此提醒一下兩個軸方向皆會發生上述的所有事情。

---

容器對齊與定位

上一篇沒有特別提及的對齊，這邊會連同定位再次讓大家裡解一下關於 Grid 容器對齊的事情。首先關於對齊，我們可以分成兩個面向來看，

1. 所有 Grid 單元集合
2. 每一個 Grid 單元
3. 僅單一 Grid 單元

樣式	適用對象
justify-content, align-content, palce-content	所有 Grid 單元集合
justify-items, align-items, place-items	每一個 Grid 單元
align-self, justify-self, place-content	僅單一 Grid 單元

上圖中綠色的框線代表了 所有 Grid 單元集合，換句話說，當你的容器有剩餘空間時，你所設定的 justify-content 與 align-content 才會發生效果。這個情況在 Grid 單元所使用的 justify-self 與 align-self 也是一樣的道理。

也就是說，當你的 Grid 單元尺寸設定，相較於整個 Grid 容器所規劃的尺寸，有產生 剩餘空間 時，才會發生效果。

另外，這邊必須要特別提及可以使用 stretch 的系列樣式，包含了，

• justify-items
• justify-self
• align-items
• align-self

當你的 Grid 單元並無指定特定尺寸時（或有產生剩餘空間時），這個 stretch 才會生效，請特別留意。

另外，在 Grid 容器整個系統內，有一個特別的設計，這個部分跟定位有關。在前幾天我們聊到 Flexbox 對於定位會打破 Flex 流向的狀況比較不同，具體上可以分為這兩種，

1. 指定網格單元容器（Container block）的絕對定位元件
2. 直接相對於 Grid 容器的絕對定位元件

第二點的部分跟 Flex 雷同，他會跳脫整個 Grid 生態系，但是，在不指定位置的情況下，還是會跟著整個生態係的設定走，舉例來說，

.grid-container {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    
    position: relative;
}

.grid-item:first-child {
    position: absolute;
}

而，如果你的 Grid 單元也有相關設定，如 justify-self, align-self 時，在沒有指定定位點的情況下，也是會跟著 Grid 生態係的設定呈現，

接著是比較特別的網格單元容器，當你的網格單元有指定一個區域時，這個定位的效果就會發生一些變化。何謂 指定一個區域 呢？我們舉個簡單的例子來看，

.grid-container {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    
    position: relative;
}

.grid-item:first-child {
    grid-row: 2 / 4;
    grid-column: 2 / 4;
    
    position: absolute;
    top: 50px;
    left: 50px;
}

在這個時候，我們將 Grid 單元指定了所使用的 Grid 容器內的範圍，如果還不熟悉樣式寫法的人先不用緊張，我在此簡單解釋一下，

• 指定列的範圍從網格格線 2 開始，直到網格格線 4 結束
• 指定欄的範圍從網格格線 2 開始，直到網格格線 4 結束

接著我們定義了定位點的上邊與左邊，各設定了 50px 的距離，最終，我們會得到這樣的結果，

上圖的紅色框線部分，就是我們所指定的區塊範圍，

grid-row: 2 / 4;
grid-column: 2 / 4;    

這一點是比較特別的，當你在 Grid 單元中使用絕對定位（absolute）時，他會依照不同的情況而發生不一樣的效果。

position: fixed 無此效果，請注意！

---

小結

關於尺寸與定位今天就先聊到這邊，明天我們繼續來聊 Grid 生態系中的格線系統。

---

目錄與小節：
[CSS] Flex/Grid Layout Modules, part 1

---

部落格同步放送：
[CSS] Flex/Grid Layout Modules, part 7

]]> 閃光洽 2021-09-12 11:45:45 https://ithelp.ithome.com.tw/articles/10261748?sc=rss.iron https://ithelp.ithome.com.tw/articles/10261748?sc=rss.iron

你如果會用 Excel，那 Grid 就應該不陌生。

不過老實講，我也不太會用 Excel。

---

G...]]>

你如果會用 Excel，那 Grid 就應該不陌生。

不過老實講，我也不太會用 Excel。

---

Grid Layout Module

其實他已經 CR 好一陣子了，目前多數主流的 CSS 框架已經開始採用。所以並不是你不會用或是沒有使用到這個東西，而是你已經在用了，但是你不知道他背後是使用 Grid Layout 而已。

Grid 的基本結構就跟我剛剛提到的 Excel 很像，他是一個矩形區塊，包含了欄與列的設定。具體想要解決的問題在於「排版」這件事情，但試著回想這將近 20 年來排版的變化，是不是又很像回到了 <table> 的年代呢？

---

Grid 基本介紹

Grid Layout 基本上包含了下列結構：

1. Grid 容器
2. Grid 元件（或其子集合）
3. 容器尺寸（寬度與高度）

相較之下，他沒有像是 Flexbox 有所謂的 軸方向 的問題。

基本的 Grid 容器組成就是這樣，看起來很簡單。由於沒有 Flexbox 的主要軸、交叉軸的問題，所以操作起來相對會比 Flexbox 容易一點點。

---

Grid 容器

首先，宣告一個 Grid 容器一樣是使用 display 屬性，

1. display: grid 亦即使用區塊（Box Level）來設定容器。
2. display: inline-grid 亦即使用行內（Inline Level）來設定容器。

這裡跟 Flexbox 一樣，被定義出來的容器屬於 grid formatting context，所以原本在 Flexbox 上面會失效的事情，在這邊也一樣會失效。

1. float, clear 會被忽略。
2. vertical-align 無法應用在 Flex 元件上。
3. ::first-line, ::first-letter 這兩個擬似元件無法套用至容器上。

同樣的，倘若元素指定 display: inline-grid 的話，在計算樣式值（Computed Value）會呈現 grid 而不是 inline-grid，這邊也是跟 Flexbox 一模一樣。

最大的不同點在於，Grid Layout 帶來了 格線軌道（Grid track）的概念。

一個 Grid 容器依據橫向（row）與縱向（column）來分割，這個分割的動作就是一個 格線軌道（Grid track）。這個軌道又可以區分為 網格單元（Grid cell）與 網格格線（Grid line）兩個面向。然後，網格單元與格線還可以區分出 命名單元（區域） 或 命名格線 的差異。

在這裡先有個底就好，後面會大量提及這些事情。

---

容器尺寸與限制

Grid 容器本身可以設定一定尺寸，但若不指定容器尺寸的情況下，Grid 容器尺寸會依照這些項目的總和來決定外部尺寸，

1. 每一個格線軌道尺寸
2. 包含間隔（gap）
3. 每個軌道內容的最大（或最小）的內容尺寸（min-content 或 max-content）

這樣會決定出 Grid 的最小或最大尺寸該是多少。通常在 軌道尺寸 夠用的情況下都不會有太大問題。問題在於不夠用的情況，倘若真的不夠用，就會採用軌道尺寸下的 min-content 來當作軌道尺寸，你的 Grid 容器尺寸設定基本上會無效。我後面會繼續舉例，這邊就先有個概念即可。

另外，倘若裝置對於網格有其限制，那麼在網格容器內的網格格線就會被限制。

1. 當你的網格元件跨度（span）超出網格格線限制，則會被限制在最後一個網格軌道上。
2. 當你的網格元件完全超出網格格線限制，則會被限制在最後一個網格軌道上，且網格軌道永遠為 1。

關於尺寸限制其實不太容易遇到，除非你故意的，或是你真的在一些比較特殊的顯示裝置要使用的時候，才必須留意這件事情。

---

網格單元與格線

在 Grid 容器當中，被 grid-template-rows 與 grid-template-columns 分割出來的區域，叫做網格單元（Grid cell），而這個容器單元會有所謂的格線，這個格線就是網格格線（Grid line）。

上圖用數字標出來的就是網格格線（Grid line），網格格線還有分成兩種：

1. 一般網格格線（或命名網格格線）
2. 隱性網格格線（implicit grid）

關於 Implicit Grid 我後面會介紹，如果你想看官方解釋也可以：

The Implicit Grid

但我不保證看得懂。

---

容器樣式

這邊與 Flex 不同的點在於，他的樣式應用非常多，也相對複雜。

樣式	可用值	預設值
grid-template-columns	none, <軌跡清單>	none
grid-template-rows	none, <軌跡清單>	none
grid-template-areas	none, <字串>	none
grid-template	上述三個設定的簡寫	none
grid-auto-columns	<軌跡尺寸>	auto
grid-auto-rows	<軌跡尺寸>	auto
grid-auto-flow	row, column, dense	row
grid	上述全部的簡寫	none

以上是一個 Grid 容器可以設定，關於容器本身的樣式。接著我們來看看裡面的設定值到底寫了些什麼東西。

---

軌跡清單

我們在設定網格的時候，比較常見的作法會類似這樣，

.grid-container {
    display: grid;
    grid-template-columns: 100px 500px;
    grid-template-rows: 100px 100px 100px;
}

歐，你說我怎麼不用 fr 來當例子？這個新的單位後面會提到。這樣我們就可以擁有一個很簡單的網格容器，他包含了，

1. 兩個欄（columns），寬度為 100px 與 500px
2. 三個行（_row），高度皆為 100px

這邊也可以搭 CSS 運算涵式或關鍵字使用，例如，

.grid-container {
    grid-template-columns: 100px repeat(50px, 3) minmax(min-content, 1vw);
}

另外，前述有提到了網格格線（Grid line），在這邊可以替你的格線命名，預設在不命名的情況下，都是以 數字 來定義網格格線，

.grid-container {
    grid-template-row: [first side-begin] 100px [side-ended main-begin] 100px [main-ended last];
}

格線名命名的規則就是用 [] 把他包起來，這樣你的格線就會有一個特別的名字。另外請留意，不要用 -start 或 -end 來當作名稱，這樣的命名方式會踩到網格格線的雷。另外，名字可以一樣，但在指定的時候必須要特別指定你要在哪一個格線。

當你使用命名格線時，在指定網格單元時就可以使用名稱，而不是去計算數字，相對來說會比較方便一些。但如果你把網格格線的名稱都設定成同一個名字，那你在取用的時候還是要指定對應的數字才行。

但，都要你取名字了，盡量還是不要一樣比較好。

至於 -start 與 -end 的雷，後續提到隱性網格會繼續講。

---

grid-template-areas 的字串定義

這個樣式的使用方式比較特別，他是需要定義每一個 網格單元 的名字，也就是說，我們可以寫成類似這樣，

.grid-container {
    display: grid;
    grid-template-areas:
        "nav nav nav"
        "sidebar main main"
        "sidebar main main"
        "sidebar main main";
}

所以，這個時候你的 HTML 就只會有三個元件，

<div class="grid-container">
    <nav class="nav">
    </nav>
    <aside class="sidebar">
    </aside>
    <main class="main">
    </main>
</div>

而這三個元件搭配的設定會是這樣，

.nav {
    grid-area: nav;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
}

最終你會得到這樣的結構，

當然，這種寫法不是沒有限制的，

1. 命名規則組合必須要是矩形（N x M）
2. 不同區塊不能使用重複名稱
3. 可以用 . 來忽略（不使用）該區域
4. 任何非預期字串都會被視為空白

所以說，以下的寫法 皆不合法，

/* 以下寫法不合法 */
.grid-container {
    display: grid;
    grid-template-areas:
        "nav nav nav"
        "sidebar main main"
        "sidebar sidebar main"
        "sidebar main main";
}

/* 以下寫法不合法 */
.grid-container {
    display: grid;
    grid-template-areas:
        "nav nav nav"
        "sidebar main main"
        "sidebar . main"
        "sidebar main main";

/* 以下寫法不合法 */
.grid-container {
    display: grid;
    grid-template-areas:
        "nav nav nav"
        "sidebar main main"
        "sidebar main"
        "sidebar main main";
}

另外，除了容器本身限制之外，當你的網格元件使用了 未命名 的網格單元時，會對隱性網格格線產生副作用。這個部分我後面會再次提及。

---

隱性網格

隱性網格（Implicit Grid）在網格系統中是一個很特別的存在。官方對他的說明簡單的解釋可以這麼形容，

你的設定不足以畫出一個網格，所以我 雞婆的 幫你把缺的格線補上。

何謂設定不足以畫出網格？例如，

1. 沒有設定欄（grid-template-columns）或列（grid-template-rows）
2. 超出設定欄或列的數量
3. 設定了 grid-area 卻不存在於 grid-template-areas 當中

隱性網格有兩個樣式可以使用，

1. grid-auto-columns
2. grid-auto-rows

設定的數值僅接受這些，

• auto
• min-content
• max-content
• fr
• minmax()
• 百分比單位數值（例如 10%）

關於隱性網格在這邊就不贅述，後面會繼續提到這個東西。

---

網格單元順序

網格單元的順序其實跟 Flexbox 使用 order 的方式是一樣的，不過，他可以使用 z-index 來定義哪一個格子比較高。

通常會搭配 z-index 大多數是網格容器本身有捲動需求的時候會特別這樣做。

---

對齊與間隔

基本上網格容器的對齊跟 Flexbox 幾乎是完全一樣。我在這邊如果再講一次好像又太浪費篇幅。基本上以下這些東西跟 Flexbox 完全一樣，

• align-items
• align-self
• align-content
• justify-content

然後網格系統多了這幾個，僅能在 Grid 容器下使用，

• justify-items
• justify-self
• place-items
• place-self
• place-content

間隔的部分也跟 Flexbox 使用同一套 gap，其實就是共用同一套 w3c 的規範，

CSS Box Alignment Module Level 3

其實這邊沒有什麼新的東西，除了 Grid 才能使用的對齊方式外，其他的東西都跟 Flexbox 幾乎一樣。

justify-items 與 justify-self 是在容器系統中，Grid 單元主要軸向維度作對齊的樣式設定。與 align-items, align-self 則是交叉向維度做對齊（或填充）的樣式。

Grid Layout 並沒有指定主要軸與交叉軸，這邊的軸向設定是跟著系統的文字流向而決定的。所以他沒有像是 Flexbox 可以明確的指定誰是主要軸，誰是交叉軸。

以下稍微說明一下 Grid 多出來的幾樣東西，

樣式	設定值	預設值
justify-items	normal, stretch, <baseline-position>, <overflow-position>?, [ <self-position>, left, right ], legacy, legacy && [ left | right | center ]	legacy
justify-self	auto, normal, stretch, <baseline-position>, <overflow-position>? [ <self-position>, left, right ]	auto
place-items	<'align-items'> <'justify-items'>?	無特定預設值
place-self	<'align-self'> <'justify-self'>?	無特定預設值
place-content	<'align-content'> <'justify-content'>?	無特定預設值

基本上可以當作是在 Flexbox 上因為需要多行而無法特別設定的東西，在 Grid 裡面可以直接設定這樣的樣式。當然，如果你的 Grid 單元數量沒有到兩個欄或列以上，其實是看不出什麼效果的。

---

小記

今天先這樣，Grid 容器基本上東西太多，要一次講完有點困難。明天會搭配圖片來解說各種關於容器的設定，還有一些比較基本的運算方式。

---

目錄與小節：
[CSS] Flex/Grid Layout Modules, part 1

---

部落格同步放送：
[CSS] Flex/Grid Layout Modules, part 6

]]> 閃光洽 2021-09-11 09:59:00 https://ithelp.ithome.com.tw/articles/10261021?sc=rss.iron https://ithelp.ithome.com.tw/articles/10261021?sc=rss.iron

數學不會背叛你，數學不會就是不會。

我現在寫三角函數都是去 Google 的，不要問。注意！本篇可能會出現大量的加減乘除，如有...]]>

數學不會背叛你，數學不會就是不會。

我現在寫三角函數都是去 Google 的，不要問。注意！本篇可能會出現大量的加減乘除，如有出現頭暈目眩、噁心想吐、手腳冰冷無力等狀況，請立即關閉本篇文章，閃光洽關心您的身體健康。

或者你要去驗孕也是可以的。

---

容器計算

前幾篇有提到剩餘空間、元件填充等等，我們現在就來看一下實際上 Flex 容器是怎麼做運算的。首先是 flex-grow 的計算方式，在數值總和大於 1 的一般情況下來看，但且記得，必須容器上有存在 剩餘空間 的情況下才能被分配。

所以我們來描述一下我們的容器跟元件，

1. Flex 容器為 600px 主要軸尺寸。
2. Flex 元件 1 為寬度 200px，flex-grow 設定為 1。
3. Flex 元件 2 為寬度 100px，flex-grow 設定為 2。

首先，我們可以得知剩餘空間為，

剩餘空間 = 600px - (200px + 100px) = 300px

然後我們就能依照 flex-grow 來分配，

Flex 元件 1 擴充寬度 = 300px x 1 / (1 + 2) = 100px
Flex 元件 2 擴充寬度 = 300px x 2 / (1 + 2) = 200px

所以畫面最後會得到，

Flex 元件 1 寬度 = 200px + 100px = 300px
Flex 元件 2 寬度 = 100px + 200px = 300px

看起來是不是沒有很難，只要會加減乘除就好了。然後，我在一開始有提到 flex-grow 總和小於 1 的情況，

1. Flex 容器為 600px 主要軸尺寸。
2. Flex 元件 1 為寬度 200px，flex-grow 設定為 0.1。
3. Flex 元件 2 為寬度 100px，flex-grow 設定為 0.2。

剩餘空間就不贅述了，但是分配的方式不太一樣。

Flex 元件 1 擴充寬度 = 300px x .1 / 1 = 30px
Flex 元件 2 擴充寬度 = 300px x .2 / 1 = 60px

所以你會發現最終我們得到的總寬度是，

Flex 元件 1 寬度 = 200px + 30px = 230px
Flex 元件 2 寬度 = 100px + 60px = 160px

這也是為何容器雖然有 flex-grow 但是沒有被填滿的情況。至於 flex-shrink 的部分基本上也是雷同的，只是從擴充變成壓縮方向相反了而已。

---

尺寸干擾

對於 flex-grow, flex-shrink 這兩件事情，被干擾的機率其實頗高，

1. min-width, max-width
2. min-content, max-content
3. max(), min()

如果不確定自己在做什麼，盡量不要在使用 flex-grow 或 flex-shrink 的情況下，使用這些設定、函數或關鍵字，還要預期會得到相對應的尺寸。

基本上在彈性設計結構的狀況下，Flex 元件尺寸應該是提供一種 確保 空間使用的狀況符合預期，請盡量不要把 Flex 元件尺寸當作是期待值。如果你要這麼做，請確保你使用的是 flex: 0 0 auto，並且保證你的元件都有相對應尺寸。

至於 minmax()，在 w3c 有特別說明 minmax() 這個 CSS Function 是給 Grid Layout 使用，所以你在 Flexbox 元件上並無法使用這個函示來計算尺寸。

回到一開始我們提到的 flex-basis 的相關描述，我們再來補充一點看起來比較 沒用 少用的寫法，這裡的重點，

請留意 width 何處會失效

設定	寬度有效值
flex-basis: max(10vw, 50rem);	計算數值，取當下最大值
flex-basis: max(10vw, 50rem); width: 60px	計算數值，取當下最大值
flex-basis: min(10vw, 50rem); width: 60px	計算數值，取當下最小值
flex-basis: min(10vw, 50rem); width: content	計算數值，取當下最小值
flex-basis: auto; width: min(10vw, 50rem);	計算數值，取當下最小值
flex-basis: auto; width: content;	計算數值，取容器內容尺寸
flex-basis: min(10vw, 50rem); max-width: 80px;	80px
flex-basis: min(10vw, 50rem); min-width: 100rem;	100rem

總結來說，除了 max-width, min-width 會強迫覆寫 flex-basis 以外，扣除 auto 會被 width 覆寫，其餘的設定都還是以 flex-basis 為準。換句話說，如果你使用以下的寫法，就會遇到一些很神奇的事情，

.flex-container {
    width: 600px;
}

.flex-item {
    flex: 0 0 content;
    width: 200px;
}

如果我們所使用的 HTML 結構像是這樣，

<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
</div>

根據簡單的數學，我們有 4 個容器元件，每個容器元件定義了 width: 200px，所以我們理論上會得到，4 x 200px = 800px 總共是 800px 的元件尺寸。然而，當我們的元件容器使用 flex: 0 0 content 時，我們的想像是，

1. 不會填充
2. 不會壓縮
3. 依照元件內容設定尺寸

還記得我們 第一篇 寫了這個結果嗎？

設定	寬度有效值
flex-basis: content; width: 60px;	60px

所以真的嗎？我們來看看實際結果，

驚不驚喜？意不意外？

然而，當我們把他分開來寫的時候，

.flex-item {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: content;
    width: 200px;
}

在這個時候他會恢復正常，這才是我們覺得不被壓縮的樣子。

為什麼？

官方有這樣的說明，

A unitless zero that is not already preceded by two flex factors must be interpreted as a flex factor. To avoid misinterpretation or invalid declarations, authors must specify a zero <‘flex-basis’> component with a unit or precede it by two flex factors.

因為 flex: 0 0 content 這樣的設定，是兩個 0 的無單位因子，再加上 content 這種無單位 flex-basis 設定，所以會造成混淆。他會被當作單一彈性因子來看待，也就是等同於只設定了 flex-grow 跟 flex-basis 兩組設定而已。

為何只有這兩組？請看原始 flex 的設定值，

none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

這樣可以理解為何會出錯了吧。由於 flex-shrink 預設為 1，所以當我們照剛剛的寫法來做的時候，就會被轉成 flex: 0 1 content 這樣的結果，並不會是你所設定的 flex: 0 0 content， 後者的設定是不太合法 的寫法。

不能說寫錯，而是在理解上官方的規定如此。

auto 不在此限。

---

零尺寸元件

另外一點，雖然你可以定義 Flex 元件尺寸，但不代表這個元件尺寸不會發生零尺寸（zero-sized）的情況。根據 Flex 容器的特性，這些所謂的零尺寸元件，會盡可能的被放在同一行，也就是說，在多行的情況下，即便第一行最後一個元件剛好填滿容器，在下一行開始之前的零尺寸元件，都會被放在上一行裡面。

其實零尺寸元件除了是空白元件外，也可能是寬度設定為 0 的元件。

---

關於 gap

在 CSS Box Alignment Module Level 3 當中，已經提供了 gap 的樣式可以使用，目前的支援度來說也算不錯，

前幾篇提到了 gap 這件事情，有這個樣式就能解決使用 padding 或 margin 的寬度問題。

.flex-container {
    display: flex;
    gap: 10px;
}

請留意，gap 還是有分軸方向，所以會有以下幾種寫法，

1. column-gap 交叉軸方向的間隔。
2. row-gap 主要軸方向的間隔。
3. gap 兩個軸方向的間隔，等於上述兩個縮寫。

但是，這不是沒有後遺症的。

<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

我們在這種結構下使用 gap 的設定，

.flex-container {
    display: flex;
    width: 800px;
    gap: 10px;
}

.flex-item {
    flex: 0 0 auto;
    width: 200px;
}

最終會造成什麼結果呢？

請注意，如果你的元件 flex-shrink 設定為 0。那麼，gap 的空間就會將 Flex 容器撐開，也就是，當你的 Flex 容器使用 overflow: hidden 的話，最後一個 Flex 元件會被切斷（因為超出了原本寬度設定了）。

而，若你將 flex-shrink 設定為非零值，那麼，你的 Flex 容器尺寸會生效，gap 的尺寸加上 Flex 元件尺寸，會視為 溢出尺寸 來處理，只是，gap 尺寸是 永遠不會被壓縮，所以倒楣的就是 Flex 元件。

---

小記

Flexbox 其實也沒有很複雜，最麻煩的其實還是尺寸處理。剩下的就交給上天安排就可以了，如果發現不對勁可以擲茭問一下媽祖也是可以的。

Flexbox 告一段落，明天會開始講 Grid 的部分。其實無論是 Flex 還是 Grid，多半都會牽扯到很多其他的模組，不過全部拉進來講會過於離題，所以 Flex 的部分就到此為止。

Flexbox 小遊戲，有興趣的可以玩玩看。
https://flexboxfroggy.com

---

目錄與小節：
[CSS] Flex/Grid Layout Modules, part 1

---

部落格同步放送：
[CSS] Flex/Grid Layout Modules, part 5

]]> 閃光洽 2021-09-10 09:29:13 https://ithelp.ithome.com.tw/articles/10261011?sc=rss.iron https://ithelp.ithome.com.tw/articles/10261011?sc=rss.iron

Media Query 已經快被講爛了。

我不確定現在是否還流行 RWD 這件事情，如果以 Core Web Vitals 來看，你可能會被建議減少未使用的 CSS，但是誰在乎誰痛苦。

我最近就挺痛苦的（倒）。

---

Flexbox 與 Media Query

前面講到了不少關於斷行、多行的問題，當我們準備面臨多裝置、多解析度的時候，這個問題又會浮上台面。畢竟以常用的 flex-direction: row 來說，你的裝置尺寸就直接與你的 Media Query 的斷點，與你的 viewport 有所關連。

這邊就先不講 viewport 了（誰在乎誰痛苦）。

我們直接來看幾個比較常用的斷點設計，以 Bootstrap（5.0.x） 為例，

Media Query	最大尺寸（max-width）
@media (min-width: 576px)	540px
@media (min-width: 768px)	720px
@media (min-width: 992px)	960px
@media (min-width: 1200px)	1140px
@media (min-width: 1400px)	1320px

也許你會覺得，斷點就這樣而已，跟我的 Flexbox 有什麼關係？有的，斷點設計最直接的影響就是容器的 剩餘空間 的計算。先前有提過剩餘空間的計算方式，現在在每一種 Media Query 的斷點限制下，每一個 階段 所呈現出來的剩餘空間都不同。

再者，如果 Flex 元件空間不足時，元件內的內容在沒有設定 overflow: hidden; 的情況下，就會超出你的 Flex 元件，同樣的道理，在 Flex 容器空間不足的情況下，就會發生兩種狀況，

• 在 flex-wrap: nowrap 的狀況下，Flex 元件（或其內容）超出容器。
• 在 flex-wrap: wrap 的狀況下，Flex 元件直接換行。

當你在設計 Media Query 斷點（這年頭還會有人手刻斷點嗎？）的時候，請留意你的容器與元件的尺寸設定，同時，你也必須留意內容是否會打破元件的尺寸。

依照 Bootstrap 那樣常見的斷點來說，我們在設計 Flex 容器，或者，我們在操作 Bootstrap Grid Layout 的時候，排版本身並不會特別去思考樣式的使用性。舉個例子來說，通常在 Bootsrtap 的起手式大概都是，

<div class="container">
    <aside class="col col-sm-4 col-xl-2 my-aside">
        <!-- 我是側邊欄位 -->
    </aside>
    
    <main class="col col-sm-8 col-xl-10 my-main">
        <!-- 我是主要區塊 -->
    </main>
</div>

.my-aside {
    order: 2;
}

.my-aside {
    order: 1;
}

@media (min-width: 576px) {
    .my-aside {
        order: 1;
    }

    .my-aside {
        order: 2;
    }
}

然後就沒有然後了。在一般情況下，不會再針對你的排版區塊做上其他的樣式設定，一方面為了確保在 RWD 的情況下不會 跑版，另外也能避開 Media Query 覆寫地獄。

所謂的 覆寫地獄 就是，Bootstrap 用了 N 個 Media Query 斷點，你就要覆寫最多 N - 1 次的樣式。

再者，我們通常在製作行動裝置（俗稱手機版）的時候，多數以 flex-direction: column; 來編排，而切換到比較大尺寸的裝置（俗稱電腦版）的時候，則會視情況改以 flex-direction: row; 的方式來編排。

請留意，這兩個方向的主要軸、交叉軸是會交換方向的。

所以，請留意你的 align-items, align-content 及 justify-content 的適用軸方向的狀況。當主要軸轉換的時候，請注意你的排版樣式也要適性調整才不會出意外。

舉例來說，

.flex-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

@media screen and (min-width: 576px) {
    .flex-container {
        flex-flow: row wrap;
        align-items: flex-start;
        justify-content: center;
    }
}

對於 Media Query 來說，其實不管對象是不是 Flexbox，你弄壞的地方他一樣會壞掉。所以之前所提到的尺寸、留白等議題，在這邊還是必須留意。當你有一些固定尺寸的內容（如圖片），在規劃排版的 RWD 時就需要計算空間是否夠用，是否產生斷點等狀況。

<div class="flex-container">
    <aside class="flex-item sidebar">
        <h2>Profile</h2>
        
        <img class="logo" src="./logo.jpg" alt="Avatar">
    </aside>
    
    <main class="flex-item main">
    </main>
</div>

.flex-container {
    display: row;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: flex-start;
}

.flex-item {
    flex: 0 0 auto;
}

.sidebar {
    width: 100%;
}

.main {
    width: 100%;
}

.logo {
    display: block;
    width: 200px;
    height: 200px;
}

@media screen and (min-width: 768px) {
    .flex-container {
        flex-flow: row nowrap;
    }

    .sidebar {
        width: 20%;
    }

    .main {
        width: 80%;
    }
}

當遇到破版的時候，通常第一件事情會做的大概是這樣，

.logo {
    display: block;
    width: 100%;
    max-width: 200px;
}

接下來客戶就來問說為何把他的視覺縮小了，然後就只能改回第一版，

.logo {
    display: block;
    width: 200px;
    height: 200px;
}

接著開始面對整體排版的空間配置問題，只好針對 .sidebar 調整，

@media screen and (min-width: 768px) {
    .sidebar {
        width: 20%;
        min-width: 200px;
    }
}

果不其然隔壁棚的 .main 被這樣一搞炸鍋了，

迫於無奈只能繼續調整 .main 的設定，

.main {
    flex-shrink: 1;
    width: calc(100% - 200px);
    max-width: 80%;
}

到最後發現內文流向也出了問題，

然後我們就得將文字中斷，大概可以這樣設定，

.main {
    flex-shrink: 1;
    width: calc(100% - 200px);
    max-width: 80%;
    work-break: break-all;
}

關於文字斷行的部分有很多種方式，這裡的例子或許不是最好，但僅提供大家做一個參考。

對於 Flexbox 的排版（Grid 也一樣）來說，尺寸是一個比較麻煩，且很容易造成跟最初視覺設計不符合的地方。所以在決定切版斷點時，必須仔細跟設計師協調畫面呈現的方式才行。

---

關於 column 方向

通常這件事情被討論的機會比較低，加上對於行動裝置來說，由上往下排列也是一種既定的作法，所以對於 column 這個方向，多數不會特別去著墨，就僅僅是換一個方向而已。這邊我們暫時不討論直書系統的呈現方式，以比較普及的由左到右、由上到下的方向來看。

請記得主要軸、交叉軸會交換，然後所應用的樣式方向會跟著主要軸交換這件事情。

對於普遍的裝置來說，今天無論是行動裝置還是電腦（泛指桌機、筆電爾等），由於垂直方向變為主要軸，所以你的 主要軸 方向並沒有「主要軸尺寸」，你的裝置尺寸這個時候變成了「交叉軸尺寸」了。

所以這個地方你就必須留意一些狀況，

1. 主要軸沒有尺寸，所以並不會產生斷行。
2. 主要軸方向對齊也由於無高度，並不會有預期效果。
3. 如果有使用填充（stretch），則交叉軸會出現填充樣式。
4. 在 Firefox 下，break-* 系列樣式可操作斷行。

具體會產生什麼情況我就不贅述，特別是第 4 點，牽扯到的範圍有點超出本系列文章要討論的東西。有興趣的人可以參考我之前寫過的 瀑布流難題。

不過我還是發牢騷一下，關於 Regions Module Level 1 到現在就感覺是躺在那，說是說跟 Flexbox 有關，但實際上從 Flexbox 那裡也找不太到相關的資訊。至於說 CSS Multi-column Layout Module Level 1 就不提了，基本上跟 Flexbox 用的 Column 是兩回事。

對於行動裝置，或比較小尺寸的裝置（更甚是你的元件區塊中想要使用 column）來說，你可以單純的把他想成 由上而下 的排列工具就好。

---

小記

無論你是要使用 RWD, AWD 還是什麼 WD，請多留意你的內容所造成的尺寸差異。無論用什麼方向來排列你的介面樣式，重點還是以內容呈現為主，說穿了 Flexbox 充其量就是工具而已，適切的使用才是上策。

---

目錄與小節：
[CSS] Flex/Grid Layout Modules, part 1

---

部落格同步放送：
[CSS] Flex/Grid Layout Modules, part 4

]]> 閃光洽 2021-09-09 09:01:40 https://ithelp.ithome.com.tw/articles/10260896?sc=rss.iron https://ithelp.ithome.com.tw/articles/10260896?sc=rss.iron

結果我真的兩篇就快講完了（驚恐）。

既然是說要講切版的話，還是多少交代一些比較基礎的東西好了。

Flex 的軸...]]>

結果我真的兩篇就快講完了（驚恐）。

既然是說要講切版的話，還是多少交代一些比較基礎的東西好了。

Flex 的軸流向與留白

之前我們提及了多數 CSS 框架的設計，絕大部分都是 row 的主要軸流向。原因也相對單純，基本上你不太會擁有一個「無限寬度」的裝置，所以在目前主流裝置下，我們的寬度都會存在一個極大值，這個極大值基本上就會是整個 Flex 容器的主要軸尺寸。

所以，我們以雙欄結構來看，最單純的設定就會像是這樣，

.flex-container {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: flex-start;
}

接著，由於我們需要「雙欄」的設計，所以我們的元件定義就是，

.flex-item {
    // 通用設定放這邊
    margin: 0 10px;
}

.flex-aside {
    // 側邊區塊，我們預設把他放在左邊
    flex: 1 0 20%;
    max-width: calc(20% - 20px);
}

.flex-main {
    // 主要內容區塊，我們把他放在右邊
    flex: 1 0 80%;
    max-width: calc(80% - 10px);
    
    // 取消左邊留白，讓我們的間隔看起來相同
    margin-left: 0;
}

最終我們會獲得這樣的結果，

可是你不是說不要用 margin 來定義間隔（gap）嗎？

是的，我們在這邊也可以使用 padding 來製作我們間隔，但是，當你的 Flex 容器或是元件有使用背景設定時（background），你還是得使用 margin 來當作間隔會比較適當。因為 background 會包含 padding 的留白部分，所以對於 Flex 元件來說，使用 margin 會比較適當。

當然，如果你使用背景的區塊是在 Flex 元件內的話，那麼使用 margin 或 padding 的差異就不大。另外，有些狀況使用 margin 是必須特別留意的，

1. 當你有使用 stretch 的時候。
2. 當你的 margin 有需要使用 auto 的時候。

對於 Flex 元件來說，margin 的關鍵字 auto 有一個特殊的效果，就是 自動補白 的特性。舉例來說，我們剛剛的主要欄位如果這樣設定，

.flex-main {
    margin-left: auto;
}

那麼他就會將 剩餘空間 往左邊補白。請留意，這裡的剩餘空間是指容器本身的剩餘空間。由於我們使用了計算過後的 max-width 會將整個 Flex 容器填滿。在沒有填滿，且沒有設定 flex-grow: 1 的情況下，這個自動補白才會生效。

自動補白看起來好像很好用，不過，margin 會與部分樣式有權重問題，

• margin 與 justify-content, align-items 會產生疊加效應。
• auto 關鍵字會覆蓋部分 justify-content 與 align-items 的設定。
• margin 使用數值在一定條件（大於剩餘空間）下，會覆蓋 justify-content 與 align-items 的設定。

只要是跟 剩餘空間 有關的部分都會受到影響。

請留意，無論是疊加還是干涉樣式設定，其本身的樣式還是有效的，以上述的例子來說，

.flex-main {
    align-self: center;
    margin-top: auto;
}

雖然最終呈現的狀態並非 align-self: center 的結果，但其自身還是受到 align-self: center 的樣式所規範。而左邊的 align-self: stretch; 也是一樣的道理。

另外，也會影響這個結果的則是 flex-grow 與 flex-shrink 這兩個樣式設定。我們先前有提到 flex-grow 是做一個 填充 的動作，所以，當你在沒有指定 Flex 元件的 軸方向 尺寸時，他會將軸方向作填滿動作。

換句話說，這個填滿跟 margin 的樣式權重，由大到小排列會是這樣，

• margin 數值尺寸，例如 margin-left: 200px
• flex-grow
• flex-basis || width || max-width || height || max-height
• margin 的關鍵字 auto

而如果是 flex-shrink 的話，就比較特殊了，由於他是 壓縮，所以在我們使用 margin 的情況下，並不會 觸發 壓縮這件事情，只有當 Flex 容器空間不足夠時才會觸發，且他也同樣會干擾壓縮的情況。

• margin 數值尺寸，例如 margin-left: 200px
• flex-shrink
• flex-basis || width || min-width || height || min-height
• margin 的關鍵字 auto

其順序上跟 flex-grow 雷同，但他的先決條件是 Flex 容器空間不足 的情況下才會發生。

---

Flexbox 巢狀結構

基本上應用的方式與一般 Flex 容器沒有差異，就是單純的把 Flex 元件再次指定為 Flex 容器，在使用上沒有太大的區別。不過你得留意的是，原有區塊元件的父子元件同方向 margin 合併問題在巢狀結構中並不會發生。

也就是說，Flex 元件與容器會獨立擁有各自的 margin，若 Box 元件沒有設定 overflow 的情況下，

.box-module-parent {
    margin-top: 30px;
}
.box-module-child {
    margin-top: 10px;
}

上述兩者因為同方向 margin 的關係，會產生合併（collapse），

而這件事情在 Flex 容器中不會發生，

.flex-module-parent {
    margin-top: 30px;
}
.flex-module-child {
    margin-top: 10px;
}

當然，你在一般 Flex 容器遇到的 margin 狀況，在這種情況下也免不了。所以，基本上多層次的運用 Flexbox 也不會有太多的意外，該寫的意外我應該都寫的八九成了。

Flexbox 終究還是拿來畫出框架的。

其實總的來說，這跟你用許多 CSS 框架的方式是雷同的，若是以 Bootstrap 為例子，其實就類似於，

<div class="conatiner">
    <div class="row">
        <div class="col-4">
        </div>
        <div class="col-8">
            <div class="row">
                <div class="col-6">
                </div>
                <div class="col-6">
                </div>
            </div>
        </div>
    </div>
</div>

這就端看你要怎麼去規劃你的框架該長成什麼樣子，只是在不使用 CSS 框架的情況下，你的 HTML 可以稍微簡潔一點點。當然，那種寫到爛掉的也不是沒有。

---

關於對齊

其實比較讓人覺得有趣的，大概就是置中對齊這件事情。

當然講到置中對齊，就得呼叫一下 Amos CSS垂直置中技巧，我只會23個，你會幾個

我只會一種，就是 align-items: center; 這樣。

說到對齊，就得提到 CSS 關於對齊的模組 CSS Box Alignment Module Level 3，但這邊不會提到太多，我們就單純的拿 Flexbox 可以使用的部分出來聊聊。

樣式	應用範圍	適用狀態
justify-content	Flex 容器	主要軸方向
align-content	Flex 容器	交叉軸方向，多行狀態
align-items	Flex 容器	主要軸方向
align-self	Flex 元件	多行狀態

請注意有兩個樣式是必須要有 多行狀態 才會有效果。當然，說到對齊就必須得提到先前說過的 flex-grow 與 flex-shrink 這兩個樣式設定。在我們沒有特別指定主要軸、交叉軸尺寸，或是特別指定 Flex 元件尺寸的情況下，這兩個設定在某些情況下會讓你產生 客戶說沒對齊 的情況。

什麼叫做 客戶說沒對齊？

邏輯上來說，這是對齊的，但如果需要「根據底邊置中對齊」的時候，他就不符合預期結果。當然，請不要傳這一篇去給客戶看謝謝。 身為一個專業的前端工程師，這樣的問題也不是沒有解法。

你就把兩個元件鎖定相同高度就好（卍解）。

我在 Flexbox 最後面會解釋關於 Flex 的一些演算方式，這邊就暫不贅述。這樣的問題其實很常發生，當你的 Flex 容器允許斷行，在產生多行的情況下，由於整個容器的交叉軸尺寸是未知的（也就是隨內容動態增長），所以元件尺寸就會因為鄰近元件的關係而造成對齊點的問題。

以往我們使用區塊元件，利用 float: left; 大多會有這種狀況，

雖然 Flex 容器沒有 靠左對齊 的特性，但，

雖然沒有了奇怪的對齊點，但這就是所謂的有一好沒兩好。這一點在 Grid Layout Module 裡面會更明顯。所以，為了解決這種奇怪的補白問題，在一些必要情況下，請賦予你的 Flex 元件一個交叉軸尺寸，用以確保你在 flex-wrap: wrap; 的情況下會是比較好的呈現結果。

以下我直接用圖片來解釋各種 對齊，

附帶一題，最後的 space-evenly 是屬於對齊模組草稿階段，但瀏覽器支援度也是不錯。在 Caniuse 裡面有 95% 以上的支持度。

CSS Box Alignment Module Level 3, Editor's Draft

space-evenly, caniuse.com

另外一個就是交叉軸的對齊（stretch 不算但我還是列出來），

---

小記

基本會遇到的狀況在這邊大概可以涵蓋個七八成，所以這個時候你再回頭去看看那些知名 CSS 框架，應該就可以理解人家為什麼要這樣做。

下一次會提及一些關於 Media Query 的事情來聊聊 Flexbox 的使用情境。

---

目錄與小節：
[CSS] Flex/Grid Layout Modules, part 1

---

部落格同步放送：

[CSS] Flex/Grid Layout Modules, part 3

]]> 閃光洽 2021-09-08 11:03:52 https://ithelp.ithome.com.tw/articles/10260889?sc=rss.iron https://ithelp.ithome.com.tw/articles/10260889?sc=rss.iron

本篇會有不少冷門範例。

其實我覺得很奇妙，就是我老是踩到一些超冷門連 Google 都找不太到的雷。

---

<...]]>

本篇會有不少冷門範例。

其實我覺得很奇妙，就是我老是踩到一些超冷門連 Google 都找不太到的雷。

---

Flexbox 能與不能

首先還是得叮嚀一下，如果使用靜態定位樣式，會打破 Flex 容器軸流向，所以請不要覺得用了 position: absolute, position: static, position: fixed 或 position: sticky 的時候來問為何 Flexbox 沒有效果。

---

尺寸

無論是 Flex 容器或是 Flex 元件，尺寸這件事情在設計或是設定上都會有一定的 毛病 限制，首先我們先來看看 Flex 容器的尺寸。

在各種 CSS 框架上，預設的容器軸都以 row 為主，而這樣的容器可能會遇到的狀況會有哪些呢？

• 容器的剩餘空間不如預期。
• 對齊點的狀況不如預期。
• Flex 元件超出容器。
• Flex 元件壓縮不如預期。
• Flex 元件強迫換行的狀況。
• writing-mode 的影響。

當然，如果換為 column 為主軸，大概會追加以下狀況，

• Flex 元件無法換行。
• flex-basis 設定不如預期。
• stretch 設定不如預期。

首先，關於容器尺寸這件事情，我們在 row 的情況下，由於我們的內容邊界都是以顯示器邊界為主，所以，你在以 row 的設定狀況下，並不用特別擔心 width 的狀況。但是，由於 nowrap 是一個預設的行為，所以通常會遇到 Flex 元件超出去的情形。

此時，如果你的容器搭配了 overflow: hidden 的話，那麼元件本身就會被容器切斷而無法完整顯示。這個情況跟一般使用區塊元件的情形是相同的。

在這個時候，倘若你的 Flex 元件有設定 flex-shrink 的話，那麼在可允許的範圍內，Flex 元件就會被壓縮到主軸尺寸內。

請注意，是可允許的範圍內。

為什麼要這樣說？因為 flex-shrink 在壓縮元件的情況下，無法壓縮到比 content 這個尺寸還要小的尺寸，舉個例子來說，

.flex-item {
    flex: 1 1 10rem;
}

在這種情況下，你可以搭配 max-width 來限制 Flex 元件的大小，不過這有個但書，我們容後再述，

.flex-item {
    flex: 1 1 20rem;
    max-width: 20rem;
}

總結來說，當你的內容會超出元件寬度時，你的 flex-shrink 會將內容尺寸當作是最小尺寸來使用。當然，我們可以將內容強迫斷行來達成顯示正常的目的。

.flex-item {
    flex: 1 1 20rem;
    word-break: break-all;
}

接著來說一下剛剛的但書。我們在大多數的 CSS 框架中（以 Bootstrap 5.0.x 為例），其實比較常見的設定會類似這樣，

.col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
}

通常是不使用 flex-shrink, flex-grow 這個設定的，也就是說不要壓縮、不擴充元件。所以，當你想要壓縮元件，又想搭配 flex-grow 的話，那麼這個 max-width 會是一個很難處理的事情。簡單來說，你會遇到這樣的狀況，

• 容器放大時，flex-grow 會踩到 max-width 而停止填滿容器。
• 容器縮小時，flex-shrink 因為內容寬度，也會踩到 max-width 而產生非預期尺寸。
• 以上的問題換成 min-width 也會有類似的狀況。

所以，總括來說，Flex 元件請單純拿來排版就好，不然各大 CSS 框架也不會將 Flex 元件的樣式寫的那麼簡單，以 Bootstrap 5.0.x 來說，就只做一件事情，

用 width 硬幹 flex-basis，其他都停用。

也由於預設不要壓縮、不擴充元件的關係，所以大多數框架都會設定 flex-wrap: wrap 來讓 Flex 元件能夠斷行。當然，斷行也是會有斷行的問題（笑）。

對了，我好心提醒一下，有在用 Bulma.io 的人，他預設是 fex: 1 1 0;，另外 Windi CSS 的 flex-1 預設是 flex: 1 1 0%，所以上面講的狀況他都會遇到喔（啾咪）。

我沒有要酸 Bootstrap 的意思，後面講到 Grid 我也會拿 tailwindcss 來嘴一下。

ps. Bootstrap 5.1.0 之後也開始使用 Grid Layout Module 了（啾咪）。

---

留白與斷行

首先我們來說說斷行這件事情，在 flex-wrap: wrap 的設定下，任何超過容器寬度的元件都會被換行。然而，以 flex-direction: row 的設定來說，如果沒有特別指定容器寬度的話，基本上就是以裝置的寬度來看。

好的，那麼斷行會受到哪些行為的影響呢？

• flex-basis
• width, min-width, max-width
• margin, padding
• 容器擬似元件 ::before, ::after
• box-sizing 非 border-box 下，border 會產生影響

在一般的情況下，我們容器基本上是沒有間隔（gap）的。我在本系列文章的圖片僅是為了識別方便而將每個 Flex 元件與容器之間加上間隔。正常來說，這是我們的 Flex 真實樣貌，

由於我們使用的是 box-sizing: border-box，所以 Flex 元件的尺寸包含了框線。如果你使用的是 content-box 的話，那麼 border 就必須納入考慮。在此就不多說這個老掉牙的設定了。

回到 Flex 容器上，我們先來看看留白（padding）這件事情。倘若你在 Flex 容器中使用了 padding 樣式，那麼你的軸尺寸就必須要扣掉樣式值，這個理論上來說 應該是常識。基於這個常識，如果你的 Flex 元件使用了絕對尺寸，那麼請確保呈現結果是符合你的需求的。

同樣是留白，我們再來看 Flex 元件上面的留白（margin）。通常我們在區塊元件（Box Model）或同等於區塊格式的內容上，所謂的留白（margin）會有一個特性，

垂直方向相鄰元件的 margin 會收合（Collapse）。

關於 margin 各種收合的事情，可以參考這一篇文章，寫得非常詳盡。

The Rules of Margin Collapse

回到 Flex 元件上，在 Flex 元件上面使用 margin 就沒有這種 效果 了，原因只有一個，

Flex 元件並不是區塊格式。

Flexible is flex formatting context, not block formatting context.

所以，即便你在 Flex 元件上宣告 display: block 也是沒有什麼效果的，他不會因此而轉變為 Block formatting context。

也就因為如此，所以當你在設定 Flex 元件尺寸時，就必須把 margin 納入考慮，否則他會在一些很奇怪的地方出現斷行。

所以，如果你真的想要使用 margin 來推開 Flex 元件的話，在 flex-basis 或是 width, max-width 當中，請使用計算寬度來達成你的目的。

.flex-item {
    flex: 0 0 auto;
    
    // 不要問我為什麼 - 40px
    width: calc(50% - 40px);

    // 使用 margin 來留白
    margin: 0 20px;
}

但是，不太建議這麼做。

原因用圖片來解釋比較清楚，

由於 Flex 容器本身沒有間隔（gap）的概念，所以倘若想使用 margin 的方式來製作這個間隔，就會產生相鄰元件間隔較大的結果。所以你在各大框架當中，幾乎沒有人會在 Flex 元件中使用 margin 留白來產生間隔。另，關於 gap 這件事情我後面會提到。

當然，特殊位移需求除外，例如 offset-3 這種。

最後，回到 Flex 容器本身，倘若你使用擬似元件，請把他當成 Flex 元件來處理。

---

不如預期的部分

其實上面已經講了不少，接下來這些可能比較冷門一點，大家可以加減聽聽看。

• 垂直方向（column）的換行
• flex-basis: 100% 真的可以強迫換行嗎？
• stretch 怎麼了？
• 關於 writing-mode 這件事

首先，打從一開始我們就只說明了 flex-direction: row 這件事情，現在來講一些關於 flex-direction: column 的事情。故名思義就是主軸、交叉軸對調。

那麼，我前面有提到，這兩個軸線對調的話，那麼有些屬性應用的方向也會跟著軸轉動。所以說，上面那些 水平 方向會發生影響的事情，在這個 垂直 方向上面，也一樣會受到影響。

垂直方向最常遇到的就是斷行問題。

斷行不是問題，問題是沒有固定高度。

然而，平常我們在設計頁面時，所謂的「高度」這件事情並不是一個固定的尺寸，換句話說，你的容器就沒有所謂的 主要軸尺寸 這件事情。換個角度來看，就是你擁有一個「無限寬」的螢幕，然後你的內容理所當然的就 無法斷行。

同樣的道理，雖然我們可以在 row 當中使用 flex-basis: 100%; 來斷行，當你將主要軸旋轉為 column 時，在沒有固定主要軸尺寸的狀況下，所謂的 flex-basis: 100% 基本上是無效的。這一點就如同，你在一個動態高度的內容當中，設定 height: 100% 是沒有意義的意思是相同的。

至於有沒有其他解法？有的。

我之前寫過相關的文章 [CSS] 瀑布流難題

老文章就不拉過來占版面了，後續還是會有機會提到相關的事情。

接下來我們來聊聊 stretch 這件事情。他主要會被應用的 方向 都是發生在交叉軸上面，所以無論你的方向是 row 或 column，請注意這個關鍵字都是應用在交叉軸上。

所有應用在交叉軸上的東西都有一個必須存在的東西，

交叉軸尺寸

所以，一旦你在沒有定義交叉軸尺寸的 Flex 容器內，無論是 align-content: stretch; 或 Flex 元件的 align-self: stretch;，都無法產生任何效果。即便你的容器符合所謂的多行（或多欄）的情況，只要交叉軸沒有固定尺寸，他就不會產生任何效果。

另外，若你使用了 align-self 的話，請與 align-items 搭配使用，效果會比較顯著一點（笑）。

最後，來稍微提一下 writing-mode 這個樣式。這個樣式其實相當冷門，多數是使用在雙位元字的情況下，詳細的說明可以參考官方的文件。

CSS Writing Modes Level 3

那麼到底跟 Flex 有什麼關係呢？具體來說，writing-mode 是決定文字流的樣式設定，但是，他也會干涉在 Flex 容器內的元件流向，舉例來說，

當你在容器內加上 writing-mode: vertical-lr 之後，文字流向就會改變，同時，你的 Flex 元件流向也會跟著改變。在這個情況下，你的 Flex 容器會有以下改變：

1. 主要軸、交叉軸與 Flex 容器流向相同。
2. 文字流向會跟著 writing-mode 樣式。
3. Flex 元件流向也會跟著 writing-mode。
4. 承上，Flex 容器對於元件的軸流向應用會交換。
5. 承上，Flex 元件流向對容器軸的應用樣式也會交換。

具體來說，加上 writing-mode: vertical-lr 跟你直接寫 flex-direction: column，對於 Flex 容器（或元件）來說，沒有什麼太大的區別（畢竟該交換的都會交換）。聽起來很複雜，當然在沒有其必要性的狀況下，也不建議你這樣做。當然，如果要做一些奇技淫巧的時候是可以這樣寫啦（笑）。

---

小記

這邊有一個地方可以玩一下 Flexbox 的各種設定，

Flexbox Playground

https://codepen.io/enxaneta/full/adLPwv

其實不要把 Flex 想得太複雜或是很萬能，他就是一個讓你規劃跟結構有關的事情，回到 HTML5 的本意，你該是用 table 的地方還是請你用 table 就好，硬是要用 div 畫出一個表格來也不是不行，但明明就是用 table 很方便的事情，為何還要用 Flexbox 來畫呢？

---

目錄與小節：
[CSS] Flex/Grid Layout Modules, part 1

---

部落格同步放送：
[CSS] Flex/Grid Layout Modules, part 2

]]> 閃光洽 2021-09-07 09:31:52 https://ithelp.ithome.com.tw/articles/10260879?sc=rss.iron https://ithelp.ithome.com.tw/articles/10260879?sc=rss.iron

萬事起頭難，只要不起頭，就一點都不難了。

在這個充滿著 CSS Frameworks 的年代，人人有功練，人人有版切，身為老屁...]]>

萬事起頭難，只要不起頭，就一點都不難了。

在這個充滿著 CSS Frameworks 的年代，人人有功練，人人有版切，身為老屁股的我只能在沙灘上曬乾，而且還賣不到錢。

鐵人賽就當作自己還有在喘氣的證明。

---

前言

其實寫 CSS 框架應該比較多觀眾，但就一個碼農來說，自己動手做會比較有趣一點。而且那些框架實在有點五花八門，就是你去 Google 一些關鍵字，諸如「超好用」「XX 天就上手」「20XX 熱門框架」然後就會跑出一堆。

我沒有阻止你用，只要能賺錢的框架就是好框架。

君不見 jQuery 的 $ 還是屹立不搖。

不過 jQuery 有點離題了就是。

---

目前 w3c 對於 Flexbox, Grid 這兩件事情算是有認真在更新。雖然說 Grid 已經 CR 不過又掛上 Draft，該吵的東西也還沒有結論（例如 subgrid 會推遲到 Level 2 才可能會推出 #Issue958）。

Grid 從 2016 年 CR 至今也 5 個年頭了，基本上在 Caniuse 上面也呈現出不錯的支援度。熱門的 TailwindCSS 基本上也有採用 Grid 來做排版，至於怎麼用不要來問我，我沒有很熟（哈）。

Flexbox 就不用再多說，我在 2012 年看他 CR 後，又到了 2016 才慢慢被推廣出來，算起來已經 9 年了。至於說為什麼那麼不紅（或是不普及？），可能要去問一下前陣子才入土的 IE 吧。

至於所搭配的 Media Query 會在系列中提及，會順便講一點，不會著墨太多。

---

目錄

1. Flexbox 基本介紹
   • [CSS] Flex/Grid Layout Modules, part 1
     • Flexbox
     • 基本介紹
     • Flex 容器
       • 樣式設定
       • 軸方向
     • Flex 元件
       • 樣式設定
       • flex-basis 的魔術
       • align-self
       • order
2. Flexbox 能與不能
   • [CSS] Flex/Grid Layout Modules, part 2
     • 留白與斷行
     • 不如預期的部分
   • [CSS] Flex/Grid Layout Modules, part 3
     • Flex 的軸流向與留白
     • Flexbox 巢狀結構
     • 關於對齊
3. Flexbox 與 Media Query
   • [CSS] Flex/Grid Layout Modules, part 4
     • Flexbox 與 Media Query
     • 關於 column 方向
4. Flexbox 其他相關資訊
   • [CSS] Flex/Grid Layout Modules, part 5
     • 容器計算
     • 尺寸干擾
     • 零尺寸元件
     • 關於 gap
5. Grid 基本介紹
   • [CSS] Flex/Grid Layout Modules, part 6
     • Grid 基本介紹
     • Grid 容器
     • 容器尺寸與限制
     • 容器樣式
       • 軌跡清單
       • grid-template-areas 的字串定義
       • 隱性網格
       • 網格單元順序
     • 對齊與間隔
   • [CSS] Flex/Grid Layout Modules, part 7
     • 新的單位 fr
     • 容器對齊與定位
   • [CSS] Flex/Grid Layout Modules, part 8
     • 網格格線
       • 隱性格線 The Implicit Grid
       • 使用命名格線與隱性格線的雷
   • [CSS] Flex/Grid Layout Modules, part 9
     • 容器中的隱性軌道設定
     • 軌道尺寸詳解
       • fit-content(limit)
       • minmax(min, max)
     • 容器單元流向
     • 容器單元的填滿
   • [CSS] Flex/Grid Layout Modules, part 10
     • 間隔、間隔、間隔
     • 最後的對齊
   • [CSS] Flex/Grid Layout Modules, part 11
     • Grid 單元
     • 尺寸
       • 可替換元件的尺寸
       • 無尺寸限制方向的魔性
     • 對齊的基本操作
   • [CSS] Flex/Grid Layout Modules, part 12
     • 單元與格線
     • 指定軌道區域名稱
     • 指定 <軌道格線>
       • <數字> <自訂軌道名稱>
       • span [<數字>, <自訂軌道名稱>]
     • 關於 auto 與 Grid 單元軌道重疊
       • 官方沒有寫的例外
   • [CSS] Flex/Grid Layout Modules, part 13
     • 填滿（stretch）與留白（margin）
     • 列方向軌道定位問題
   • [CSS] Flex/Grid Layout Modules, part 14
     • 單元的對齊
     • 對齊的權重順序
     • 超出格線
6. Grid 能與不能
7. Grid 與 Media Query
8. Grid 演算機制
9. Grid 與 Flexbox 比較
10. Grid / Flexbox 混合應用
11. Grid 進階與新功能
12. Grid 在瀏覽器上的各種差異
13. 那些跟 Grid 相關的 CSS 樣式設定
14. 那些關於 Level 2 的事情

以上這些，其實就把超長篇幅的文章然後分割成 30 份這樣吧（哈）。

---

其實我不知道 Flexbox 還有誰想看？

這年頭好像用框架比較快，誰理你背後的原理是什麼呢？

---

Flexbox

我們先來看看可使用狀況。基本上除了 IE 以外，是不用擔心使用上的問題。

Flexbox 的基本盤是對應從 CSS2.1 以來的四種編排模式，

1. 區塊（block）
2. 行內（inline, inline block）
3. 表格資料（table, 或各種資料集設計）
4. 定位區塊（使用 position 的各種變化）

雖然是這樣講，不過這就跟當年 CSS1/2/2.1 開始流行後，從 <table> 慢慢轉向 <div> 後，接著到了 HTML5 開始講語意化。出了一些很奇妙的事情，

1. <table> 退流行了所以我都用 <div> 很潮～
2. <div> 就用 position 神馬都可以排，超 DUE 的～
3. float 簡直凌波微步，我得意的飄～
4. HTML5 說要語意化，用 <div> 簡直罪惡！

其他的就不提了，我只想說，為了語意化而語意化真的挺噁心的。

---

基本介紹

Flexbox 區塊元件主要構成如下，

1. Flex 容器（Container）
2. Flex 元件（Items）
3. 容器尺寸（通常我們叫做 寬度）
4. 交叉軸尺寸（通常我們叫做 高度）
5. 容器主軸/交叉軸（依據排列方式決定哪一個方向為主軸)

如果你把 Flex 容器主軸方向設定為 column 的時候，上圖的主要軸、交叉軸就會交換。

---

Flex 容器

設定容器我們可以使用 display 來達成，容器可以設定成兩種，

1. display: flex 亦即使用區塊（Box Level）來設定容器。
2. display: inline-flex 亦即使用行內（Inline Level）來設定容器。

無輪你設定的是哪一種，需要留意 Flex 容器會忽略以下特性，

1. float, clear 會被忽略。
2. vertical-align 無法應用在 Flex 元件上。
3. ::first-line, ::first-letter 這兩個擬似元件無法套用至容器上。

倘若元素指定 display: inline-flex 的話，在計算樣式值（Computed Value）會呈現 flex 而不是 inline-flex，這一點請留意。

---

樣式設定

在容器當中，以下列舉常用的樣式設定，

樣式	值	預設值
flex-direction	row, row-reverse, column, column-reverse	row
flex-wrap	nowrap, wrap, wrap-reverse	nowrap
flex-flow	<flex-direction> <flex-wrap>	無預設值

容器主要軸、交叉軸會因為方向性的不同而交換，其下屬性所適用的方向也會不同。

另，軸方向也會因為 writing-mode 的影響而有不一樣的呈現，關於 Write Mode 可以參考 w3c 上面的說明（CSS Writing Modes Level 4）。

容器中對於影響元件的屬性有這些，

樣式	值	預設值
justify-content	flex-start, flex-end, center, space-between, space-around	flex-start
align-items	flex-start, flex-end, center, baseline, stretch	stretch
align-content	flex-start, flex-end, center, space-between, space-around, stretch	stretch

需要留意的是 align-content 只能適用在多行的 Flex 容器當中，在預設的容器設定中使屬於單行 Flex 容器，套用這個樣式是無效的設定。

---

軸方向

容器些樣式設定會因為軸方向性的不同而應用在不同的方向上（會跟著軸轉動）。請留意一個點，軸方向並不總是內容流向，我所舉的例子都是以慣用方向為主（由左至右，由上到下）。

舉個例子來說，

另外關於 align-content 則是在多行容器中才會套用到這個樣式。所謂的 多行 的意思即是 wrap 的情況下，產生超過一行的 Flex 元件時，該樣式就會被套用。

請留意 column 這個方向在沒有容器尺寸的情況下，無法產生 wrap 的效果，亦即並無 多行 的情況存在，且關於 wrap 的相關樣式也會失效。

舉一個套用 wrap 產生多行 Flex 容器的例子，

跟其他兩個樣式相同，當軸方向轉動時，align-content 也會跟著軸轉動，亦即應用的方向會不同。

---

Flex 元件

任何被 Flex 容器所包含的第一層子元件，都會被轉成 Flex 元件，而自身屬性會轉換成 Flex 格式內容（Flex formatting context），可以當作一般區塊元件看待，但實際上並不是（Like Box Model, bot NOT.）。如同上述所說，這些元件並無法使用 float 爾等設定，這一點需特別留意。另外，假設這些元件被定義了靜態定位（position 為 static, absolute）時，該元件就不屬於 Flex 容器預設的主軸流向，會跳脫任何關於 Flex 容器所帶來的影響。

元件自身也可以使用 display: flex 來將自己轉變成容器，這樣的作法在需要複雜結構時，可以自由變化使用。

---

樣式設定

Flex 元件有以下樣式可以使用，

樣式	值	預設值
flex-grow	數字（負值無效）	0
flex-shrink	數字（負值無效）	0
flex-basis	auto, content 或 寬度	auto
flex	none 或 <flex-grow> <flex-shrink> <flex-basis>	0 1 auto
order	數字（可為負值）	0
align-self	auto, flex-start, flex-end, center, baseline, stretch	auto

其中 flex 除了 none 外，還有幾個關鍵字可以使用，

關鍵字	等值
none	0 0 auto
initial	0 1 auto
auto	1 1 auto
<正整數>	<正整數> 1 0

---

flex, flex-grow, flex-shrink, flex-basis

在絕大多數的 CSS 框架中，我們比較常見的設定大多都是這些組合，

flex: 0 1 auto;
// 或
flex: 1 0 100%;
// 或
flex: 1 0 50%;
max-width: 50%;

然後就沒有然後了。因為人家這樣用所以你就跟著這樣用，至於為什麼要這樣用好像也不是挺重要的事情。

沒關係，我們就來看看到底發生了什麼事情？

屬性	說明
flex-grow	將元件依照此設定數字的權重來填滿容器的剩餘空間。
flex-shrink	當容器剩餘空間不足時，依照此權重來壓縮元件。
flex-basis	在水平（row）排列容器中，等同於 width 樣式，在同時設定時將會忽略 width 的樣式設定。但若為 auto 或 content 時，則 width 樣式將會覆蓋。而當你設定為 0 時，結果會跟 content 雷同，但權重不同。

flex-grow 計算方式，可以依照此公式來計算，

剩餘空間 x <flex-grow> / sum(<flex-grow>)

剩餘空間怎麼來的呢？

容器空間 - sum(<flex-basis>||<width>)

但是，

當你的 flex-grow 總和小於 1 的時候，事情就不是這樣了。在所有 Flex 元件的 flex-grow 總和小於 1 時，該總和會直接當作 1 來使用。換句話說，上面的公式會變成，

剩餘空間 x <flex-grow> / 1

這樣計算下來，容器就可能會有剩餘空間沒有分配的情況。

另外，當你的 flex-grow 有搭配 max-width 使用時，所計算出來的元件若大於 max-width，則會優先取用 max-width 的設定值來使用，計算出來的填滿尺寸將會被忽略。這也是造成容器沒有被填滿的另外一個原因。

flex-shrink 計算方式，可以依照此公式來計算，

溢出空間 x <flex-shrink> * <width>) / sum(<flex-shrink> * <width>)

溢出空間的計算方式為（注意，這為負值），

容器空間 - sum(<flex-basis>||<width>)

與 flex-grow 雷同，當你的 flex-shrink 總和小於 1 的時候，他並不會拿所有的溢出空間來計算，你的真實的溢出空間要先經過這樣的計算，

溢出空間 x sum(<flex-shrink>) / 1

算出新的溢出空間之後，才回頭套用上面的公式去計算。

---

flex-basis 的魔術

特別把這件事情拿出來講的原因，是因為他跟 width 實在有說不清的愛恨糾葛。如同上述提及了一些優先權的事情，這邊給一個比較清楚的比較表，

設定	寬度有效值
flex-basis: 50px;	50px
flex-basis: 50px; width: auto;	50px
flex-basis: content; width: 60px;	60px
flex-basis: 70px; width: 60px;	70px
flex-basis: auto; width: 80px;	80px
flex-basis: 90%; width: 80px;	90%
flex-basis: 90%; max-width: 80%;	80%

基本上，只要 flex-basis 不是使用關鍵字 auto, content 的情況下，優先權一律覆蓋 width 的設定。但是，這個數值設定會受到 max-width 的影響而有所不同。

---

align-self

這個 Flex 元件屬性有一個 必要條件，倘若以 row 為主軸方向，你的容器必須要有交叉軸的尺寸設定，不然這個屬性是無法有效呈現的。

---

order

故名思義就是 Flex 元件順序的設定，但請留意，如果你的元件使用了靜態定位設定（position 為 static, absolute）時，因為元件會跳脫 Flex 主軸流向，所以此時的順序設定會失效。

Flex 元件會有一個隱性的定義，在 order 樣式混用的情況下，沒有設定 order 樣式的 Flex 元件，會帶有一個 order: 0 的效果。所以，若你在多個元件使用 order 時，請務必確認每個元件都有設定你想要的 order 樣式。

舉例來說，

<div class="flex">
    <div class="item item-1"></div>
    <div class="item item-2"></div>
    <div class="item item-3"></div>
</div>

.flex {
    display: flex;
    flex-flow: row;
}

.item {
    flex: 1 0 33.333333%;
    max-width: 33.333333%;
}

.item-1 {
    order: 1;
}

.item-2 {
    order: 3;
}

.item-3 {
    order: 2;
}

最終呈現的結果如圖，

有一點請留意，如果你的軸方向是反向（row-reverse 或 column-reverse）的話，順序的設定也會反過來。

---

小記

以上這些是 Flexbox 的基本概念介紹，其實講起來並沒有很多艱深的東西，真正比較枯燥乏味的會再後面繼續介紹，如果不想理解 Flexbox 的演算機制的可以跳過沒關係（笑）。

本篇內容理論上可以應付五成以上的容器設定。為什麼只有五成？因為我還有 留白 的部分沒有講到，那些算一算大概是剩下的四成五左右。

下一篇會著墨於那個四成五，至於剩下的 5% 就放最後吧，反正都是一些很硬的演算機制。

---

同步放送：

[CSS] Flex/Grid Layout Modules, part 0
[CSS] Flex/Grid Layout Modules, part 1

]]> 閃光洽 2021-09-06 22:58:05