# HTML(3/10) Day 6 五倍紅寶石(第八屆共筆)(2021/7/05)

## 類別(class)命名規則

| 蛇式 | 小駝峰 | 大駝峰 | 骨式 |
|:---------:|:---------:|:---------:|:---------:|
| sub_title | subTitle | SubTitle | sub-title |

另外Amos老師的[**文章**](https://ithelp.ithome.com.tw/articles/10217192)還有提到：
* 名稱第一個文字可以是中線和底線
* 名稱有區分大小寫
* 第一個字不能是數字

class命名模式可以參考[BEM](http://getbem.com/introduction/)

---

## CSS宣告

盡量把相似版面中，相同的屬性寫進同一個選取器中

選取A群組下的Ｂ元素

.A B {
    屬性: 值;
    屬性2: 值;
}

---

群組式宣告：利用逗號來區分選取對象，例如：

A,
B {
    屬性: 值;
    屬性2: 值;
}

---

### 尺寸算法：
可見尺寸 = content(width & height) + padding + border
佔據空間 = 可見尺寸 + margin

box-sizing：可改變寬高作用位置，依照content或border。
例如：設定box-sizing: border-box，其物件寬度就不會超過width的值(width 的值會 = 可見尺寸)。

---

## flex：
1. 子層沒設高度會預設成父層的高度。
2. 父層沒設高度會被子層撐開。(常用)
3. flex後，子物件可以運用的空間為父層的空間。
4. 父層在沒有設定flex的情況下，不能控制子物件位置。（還有position啦，不過還沒教到）

### flex屬性(寫在父層)：
1. justify-content：主軸對齊，只適合用在單行的情況，多行易跑版。(ex: 5個物件，第一行三個，第二行兩個，會變得不對稱)。
2. flex-direction：主軸方向。可用reverse改變方向。
4. flex-wrap：控制交叉軸換列方向，交叉軸原本向下換列，reverse變交叉軸向上換列。
5. align-items：控制子層物件在彈性列中交叉軸的位置(內容物在彈性列中的位置)，**將父層剩餘空間平均分給彈性列**，若子物件沒設定高度，其高度會被內容撐開。
6. align-content：控制彈性列在整個父層中交叉軸的位置(彈性列在整個父層空間的位置)，類似交叉軸版的justify-content。(需在多行狀況下才能使用(加wrap))

### flex屬性(寫在子層)：
1. order：物件在主軸的排列順序，數字小的在前面。(預設為0，可用負數)
2. flex-grow：延伸，可控制物件在主軸的長度，將剩餘空間依加權比例分配到物件上。
3. flex-shrink：收縮，子物件在主軸的長度超過父層時可以用。
4. flex-basis：主軸長度基本值，會取代主軸的長度。
5. align-self：屬性跟align-items一樣，用來控制單一物件位置。

---

技巧：flexbox物件垂直居中方法

1. 使用align-items: center
2. 多行使用flex-wrap: wrap; align-content: center; align-items: center
3. 對子物件設定margin: auto px

---

CSS指令原檔：https://www.xmind.net/m/tq2WNz

Flexbox屬性速記圖

原始來源：https://twitter.com/simonpaix/status/1402303521047842821/photo/1

###### tags: `HTML` `CSS`