DAY 5
0
Modern Web

## 容器計算

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

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

``````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
``````

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
``````

## 尺寸干擾

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

`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`

``````.flex-container {
width: 600px;
}

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

``````<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>
``````

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.

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

`auto` 不在此限。

## 關於 `gap`

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

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

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>
``````

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

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

## 小記

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

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

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