---
# System prepended metadata

title: 5xRuby網頁前端設計 CSS Flex 課堂筆記
tags: [5xRuby, css]

---


5xRuby網頁前端設計 CSS Flex 課堂筆記
===
###### tags: `5xRuby` `css`
(上課時間：20191208)

![Box Model](https://i.imgur.com/GhcXAJH.png)

盒模型 Box Model
---
盒模型(Box Model)：讓畫面的資訊限制在一個尺寸內。
- content(藍色)：顯示內容
- padding(綠色)：邊框到內容之間的距離(又稱內距、留白、墊充)
- border(黃色)：邊框
- margin(橘色)：外邊界的距離(又稱外距，不計入Box的實際大小)

※ box-sizing：變更盒子的計算方式。
用來指定寬度(width)和高度(height)要作用在哪一個盒子(box)使用。
* content-box(預設值)：把寬度值設定給內容物。
* border-box：把寬度值設定給邊框到邊框之間的尺寸。
*HINT：背景色的範圍即是在邊框內(含邊框 border-box內)
1. Example (設定 box-sizing:content-box時)：
```CSS=
.box {
  width: 300px;
  height: 100px;
  margin: 20px;
  padding: 20px;
  border: 5px solid;
}

* 實際寬度：350 (width + padding*2 + border*2)
* 實際高度：150 (heigth + padding*2 + border*2)
```
2. Example (設定 box-sizing:border-box時)：
```CSS=
.box {
  width: 300px;
  height: 100px;
  margin: 20px;
  padding: 20px;
  border: 5px solid;
}

* 實際寬度：300 (width)
* 實際高度：100 (heigth)
→ padding和border設定的寬度/高度會自動往內推。
```
※ padding屬性值寫法 (margin寫法亦同)： 
- 一個值：指定四個邊界 → padding: [上下左右] 
- 兩個值：縱向 和 橫向 → padding:  [上下][左右] 
- 三個值：上 橫向 下 → padding: [上][右左][下] 
- 四個值：上右下左 順時針寫法 → padding: [上][右][下][左] 

※ 設定border四邊框色順序亦為[上][右][下][左]
```CSS=
border-color: green blue red yellow;
border-style: solid double dotted dashed;
```

:::success
:art: **rgba值設定** 
background-color: rgba(紅, 綠, 藍, alpha);
[ rgb值：0~255 ]
[ alpha值(透明度)：0~1 ( 0 = 0% 透明；1 = 100% 不透明)]

※ 背景色的範圍：border + padding + content (不包含margin) 
:::

網頁兩大主角 inline v.s block
---
- 行物件(inline)：會跟文字排列在同一行的物件 
※ 但inline不支援寬高物件設定 
- 區塊物件(block)：不會排在同一行的物件(自己獨佔一列)

|       | display:inline | display:block | display:inline-block |
| ------ | :------: | :------: | :------:|
| width |X|O|O|
| height |X|O|O|
| 排列 |跟大家同一列|獨自一列|跟大家同一列|
| padding 左右 |O|O|O|
| padding 上下 |X|O|O|
| margin 左右 |O|O|O|
| margin 上下 |X|O|O|

※ 當編排版面時，使用 inline-block在`<a>`或`<li>`時，標籤之間會有空白字元(約 4~5px)。
→ 清除空白字元的方法：須在父層先設定字元為0 (`font-size:0;`)

Float (浮動)
---
- 文繞圖：float:left / float:right
- 多欄版面編排

:::success
＊HINT：**為什麼要==清除浮動==(clearfix)？**
父層未設定高度時，是無法被撐開呈一個容器，會由子層去撐開它。
但當子層使用float，會造成左鄰右舍集體大爆走，導致父層無法判斷子層而無法被撐開。這時就需要清除浮動，讓使用float的子層可以按規則在容器中移動。
```css=
.clearfix {
    clear: both;
}
```
資料來源：https://w3c.hexschool.com/blog/19e3259e
:::

Flex (彈性盒子)
---
==父層：==
* display
`[display:flex]`：子層預設衡向排列(左至右) 
* flex-direction ：控制排列與資料的方向 
`[flex-direction:row]` / `[flex-direction:row-reverse]` 
`[flex-direction:column]` / `[flex-direction:column-reverse]`
 ![flex-direction](https://i.imgur.com/ptBsuQO.png)
※ `<body dir="rtl">` (會蓋過flex-direction的設定) 
dir：direction 語言的流向 
rtl：rigth to left 由右至左
* flex-wrap ：超過設定範圍時會折行 
`[flex-wrap:wrap]`：超過父層的資料會自動折行
`[flex-wrap:wrap-reverse]`：反向折行
`[flex-wrap: nowrap]`：不折行 
* flex-flow ：是 flex-direction 與 flex-wrap 的縮寫。
`[flex-flow: <flex-direction> || <flex-wrap>]`
---
![主軸 次軸](https://i.imgur.com/xVmvXnU.png)
※ 主軸(main axis)：資料的流向軸 / 次軸(cross axis)：交叉軸{由上至下 由左至右}為換行方向
* justify-content 對齊方式 (以主軸做對齊基準) 
`[justify-content:flex-end]` 
`[justify-content:flex-start]` 
`[justify-content:center]` 
※ start和end並非固定靠左或靠右，是以flex-direction的方向決定開始及結束的方向及位置 
EX：設定`flex-direction:row`時為衡項順排 1→2→3，則1為頭 3為尾，當設定`justify-content:flex-end`時，則往3的方向靠。
![justify-content Part1](https://i.imgur.com/Ty60s0D.png)
`[justify-content:space-between]` 平均分配內容元素，左右元素將會與start和end貼齊 
`[justify-content:space-evenly]` 平均分配內容元素 (*此法支援度較低)
`[justify-content:space-around]` 平均分配於內容元素左右兩側 
![justify-content Part2](https://i.imgur.com/rBz8005.png)
* align-items：針對彈性列裡面的**物件**做對齊(以次軸做對齊基準) 
─ 主要針對**單行**的物件進行處理
`[align-items:flex-start]`
`[align-items:flex-end]`
`[align-items:center]`
`[align-items:stretch]`：自動延展(無設定高度，填滿box)
`[align-items:baseline]`：以所有內容元素的基線作為對齊標準
![align-items](https://i.imgur.com/u1vxJ7y.png)
* align-content：針對彈性列做對齊
─ 主要針對**多行**的物件進行處理
`[align-content:flex-start]`
`[align-content:flex-end]`
`[align-content:center]`
`[align-content:space-between]`
`[align-content:space-around]`
`[align-content:stretch]`
![align-content](https://i.imgur.com/XKQoCAA.png)
※ 當彈性列的物件只有一列時要讓彈性列垂直置中，寫`align-content:center`時，要再加上`flex-wrap:wrap`做折行的動作，否則彈性列的高度與父層高度相同就無法垂直置中對齊。 

==子層：==
* `[order]` 值預設為0，則原始碼會照原本的順序做排列。
設定-1則往start排列；1則往end排列。
* `[align-self]`設定單一元素的對齊方式。(會覆寫父層 align-items 的設定)
* `[flex-grow]` 分配剩餘的空間(主軸的長度)。
* `[flex-shrink]`
* `[flex-basis]`
⇢ 參考資料：https://cythilya.github.io/2017/04/06/flexbox-advance/