# 9/14 CSS3 基礎實作 - flex 進階屬性
###### tags: `CSS3 基礎實作` `2021/09/14` `進度筆記` `前端心得`
---

# 今日講課-上午的部分

參考資料:

[圖解：CSS Flex 屬性一點也不難](https://wcc723.github.io/css/2017/07/21/css-flex/)

[Flex 空間計算規則](https://wcc723.github.io/css/2020/03/08/flex-size/)

### flex 進階屬性

flex 是縮寫，裡面依照順序有包含三個屬性 `flex-grow`、`flex-shrink` 和 `flex-basis`, 如果在只有設定一個則是 `flex-grow`

Flex Box 內的區塊寬度超過的部分會自動被縮成與 Flex Box 的父層容器等大, 這是 Flex 中的「縮」, 也就是 `flex-shrink` , 除了縮以外還有「伸」, 當在 Flex Box 內還有剩餘空間時, 內部的區塊能夠依照比例將空白的部分填滿，這個「伸」為 `flex-grow`

- flex-basis: 元件的基準值，可使用不同的單位值。


在父層 display flex 啟用的情況下, 會幫你塞到父層內的大盒子, 而且永遠都是均分(大概) , 會改變 div 佔滿整行的狀況(div 預設是 display block), 然後一直排排下去

## flex grow 公式

原本的寬 - ((不夠的空間) * flex-shrink * flex-basis) / 總寬度


---

# flex grow 伸展 變大

- > 定義彈性盒子項（flex-item）的拉伸因子, 預設值為 0

在父層應用 display flex 情況下, 子層容器去佔有並搶走父層容器的剩餘空間, flew grow 這屬性一樣是應用在子層容器上; `flex-grow` 會定義子層容器去瓜分和搶走剩餘空間的比例, 預設為 `0`, 也就是當剩餘空間存在的情況下, 是不會有去瓜分的動作

==子層容器在父容器的 "主軸線上" 還有多少空間可以被 "瓜分", 這個可以被 "瓜分" 的空間就是剩餘空間==



三個 box 加起來總共 900, wrap 1100, 1100-900 還有 200


1 2 3 box 各別下 flex grow 2 1 1 等分 , 會用 200pixel / 3, 這 三個 box 分別分到 100px 50px 50px

###### 計算方式如下(引用來自掘金)：

> - 剩餘空間：x
> - 假設有三個flex item元素，flex-grow 的值分別為a, b, c
> - 每個元素可以分配的剩餘空間為： a/(a+b+c) * x，b/(a+b+c) * x，c/(a+b+c)

---

# flex shrink 收縮變小

如果子層容器被設置了 flex-grow 的情況下, 有被拉伸的可能, 那什麼情況下才會去壓縮子層容器呢？

- 在父層 display flex 啟用的情況下, 只有在子層寬度大於父層的時候才會發生收縮, 收縮的大小是依據 flex-shrink 的數值公式

- flex shrink, 原本預設即為 1, 表示大家被壓縮的比例相同, 記得下在子層元素上

- **如果子層容器沒有超出父層容器, 則無法下 flex-shrink, 因為這個值會無效**

###### 計算方式(來自掘金)：

> - 三個flex item元素的width: w1, w2, w3
> - 三個flex item元素的flex-shrink：a, b, c
> - 計算總壓縮權重： sum = a * w1 + b * w2 + c * w3
> - 計算每個元素壓縮率： S1 = a * w1 / sum，S2 =b * w2 / sum，S3 =c * w3 / sum
> - 計算每個元素寬度：width - 壓縮率 * 溢出空間

---


這個 box6 用開發者工具看可以看到原本有多大


這個 box6 原本有多大的體積

下了 flex shrink 0 後 原本的 box 不被限制, 他的收縮被解放後, box 恢復原本大小


如果在 box1 下 flex shrink 0, 他會解除 display 的 flex 限制


# 參考資料:
[Day24 Flex 空間分配 flex-grow / flex-shrink / flex-basis - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)](https://ithelp.ithome.com.tw/articles/10208741)

[掘金 (juejin.cn)](https://juejin.cn/post/6844904016439148551)

----

# 課堂練習 - 把回家作業 RWD 組版改成 flex

提示: 試著把 float 全部用 flex 取代


除了 RWD 組版改成 flex 的版本外, 之後還有其他 RWD 組版

> RWD組板-flex版
> 內容： ● 將電腦版、小螢幕、平板版、手機版完成 ● 改用 flex 完成排版

1030 後的時間都來練習

----

# 下午上課-老師示範 flex 切 RWD

# 先看電腦版 - RWD

# HTML container 包著左右


# 畫出 left right

記得下 flex 在 content


# 記得去看 emmet 語法

# 接著切 .right 右邊大版面


# 將右邊(.right)大版面內的 img 調整寬高

來看一下怎麼分成三等份


## 算一下間距
> ==三個圖片分成三等份, 中間間距加起來 12px, 所以 (12/3 = 4 px, 33% -4)==


用 justify between 去分開, 連 margin 都不用


# 把圖片水平垂直置中

justify-content center; align item center


----

# 老師示範 flex 切 小螢幕 RWD


可能會遇到不知道怎麼讓 X 在上面, YZ 在下面

# 先下 @media screen

來調整 X img1的寬度, 接著把 Y Z 對半切, 也要注意間距(10px 平均分配給 Y Z)


# 發現都擠在一起

因為 flex 預設不換行, 每個 flex item 會加上本身的寬度去擠到父層元素的容器內, 所以可能會爆版


# 下個換行指令


# 然後幫忙推個間距


# 記得 flex 會把換行後剩餘的空間作平均分配

下 align-content: space-between; 或是 justify content space between 也行

---

# 平板版 RWD

## 觀察一下版面


## 去 container 下 換行 wrap 指令


# .left logo 怎麼調整

# 把 menu 的 display 改成直的


# 把 menu-btn

的 margin-bottom 拿掉


# 調整 menu 內的子元素


# gap 新屬性

使用超新的 屬性 gap: 38px (到今年六月才支援 Safari 瀏覽器)

## 調整間距

可以看到 AAA 被 GAP 分開, 可以讓子元件產生間距


可以調整 row gap 和 column gap


## 把 logo 和 menu 分散對齊以及調整間距

分散對齊的方法

justify content space between


調整 logo menu 的間距


## 看一下有沒有成功換行


## 我們來減去最上方的 bar 的 height


## 接著來做中間版面減去左右兩邊的間距距離

100%-68px


接著看版面有沒有做出左右兩邊的間隙


# 手機版 flex RWD 調整

把 .left 改成置中



# 調整 logo 大小



# 新增手機的漢堡排選單



發現他們一起置中


# 這時候別無選擇 只好把 漢堡排脫離排版系統

讓 logo 被 flex 控制, 漢堡排脫離版控

記得去調整父層 relative


再來調整子層的 position


# 記得把漢堡排的字體藏起來


# 調整 .right 的版型

如果不要變扁記得給 min height

# 下了 flex 後要記得

別忘記 merge 和 padding 還是可以用!

position 不得已的時候還是可以用

# 預告-明天有切版大訓練(抖

明天切的版型預告

Twitch 的仿切


老師先丟到 9/15 資料夾上了~

可以先去看看, 偷切一下(?)

---