# 第二周直播課程 學習筆記
###### tags: `學習筆記` `六角學院`
這周是學如何使用flex排版，和margin及padding類似。但不同的是，需要強制設定數值的margin及padding在需要自適應的網頁上非常受侷限，而flex只要掌握網頁相關定位就能隨畫面大小移動；而過去在排版上需要寫很多的程式碼，在使用flex後，也濃縮至一兩行，因此在現在的網頁開發上，使用flex更具有優勢。

## 學 Flex 前要先知道的事

### Flex要下在Container外容器
而在學習flex之前，首先需要了解的是，flex的屬性是針對容器內的內容影響的。因此假設A區塊容器中的文字段落需要水平垂直置中的話，flex的屬性應該要下在包容著文字段落的A容器，而非文字段落本身。

### Flex中的Flex中的Flex
HTML標籤的特性就是，身為container的標籤同時也能是內元件，所以flex屬性並不只限定於使用一次。

而從父層繼承而來的CSS屬性並不會作用於自身內部的子元件。舉繼承財產來說，爺爺死後的財產，若是爸爸還在的話，你是分不到一毛錢的。所以如果作為父層內的子元件想對自己內部的元件使用flex的話，就必須在自己身上加上flex的屬性。

### Flex的世界沒有X軸與Y軸存在
受flex影響的物件可以垂直，或是水平的改變位置，但這樣的改變卻和X、Y軸無關。在flex的概念中，垂直以及水平的線為「主軸 main axis」與「交錯軸 cross axis」，而物體即是在這兩條軸線上移動。

而之所以使用「主軸 main axis」與「交錯軸 cross axis」而非X軸與Y軸的概念，是因為在flex中，兩者是能夠透過`flex-direction`的屬性來改變方向，因此使用flex在調整物體位置時，並不能單純使用X軸與Y軸的概念來思考。

（圖片來源：[浅谈Flex布局的属性及使用](https://juejin.im/post/6844903614209605646)）

## 改變Flexbox中物體的位置
Flexbox就是帶有display:flex的外容器

而說到了「主軸 main axis」與「交錯軸 cross axis」的概念，而物體在flexbox中改變位置也是依靠這兩條軸線移動。

要熟悉這兩條線可以透過小遊戲的方式來了解：
[Flexbox Froggy](https://flexboxfroggy.com/#zh-tw)
[Flex Pirate](https://hexschool.github.io/flexbox-pirate/index.html#/)
或是透過[Flexbox Playground](https://codepen.io/peiqun/full/WYzzYX)來熟悉主軸以及交錯軸的概念

### 改變Flexbox中物體的位置 1: 用 flex-direction 改變主軸方向
在默認情況下，flex的主軸是水平的（row），但透過flex-direction可以將flex的主軸水平翻轉（row-reverse），也可以將其垂直（column）或是垂直後翻轉（column-reverse）。

#### flex-direction: row　（預設屬性）
主軸：水平
交錯軸：垂直
物品：沿著主軸由左至右排序

#### flex-direction: row-reverse
主軸：水平
交錯軸：垂直
物品：沿著主軸由右至左排序

#### felx-direction: column
主軸：垂直
交錯軸：水平
物品：沿著主軸由上至下排序

很像div一般的排法，常用於RWD響應式網站

#### flex-direction: column-reverse
主軸：垂直
交錯軸：水平
物品：沿著主軸由下至上排序

### 改變Flexbox中物體的位置 2: 用 justify-content 物品在主軸上的位置
在了解flex-direction對於主軸方向的改變之後，接著就是處理物體在主軸上的位置分布，而justify-content就是針對物體在主軸上的位置分布的屬性。

以下圖例以flex-direction:row為主軸方向
主軸：水平
起始點：左
#### justify-content: flex-start （預設屬性）

#### justify-content: center

#### justify-content: flex-end

以上三種方式都是物體連在一起，在主軸上移動，若沒有使用margin刻意隔開的話，物體都會是連在一起的狀態。
接下來space-between, space-around, space-evenly都是將物體在flexbox內區隔開。

#### justify-content: space-between
物體會自動與flexbox的頭尾相連，且物體間會保持相等距離。

#### justify-content: space-around
以物體為中心，向左右擴展相同的距離，不會和flexbox的頭尾邊界相連。

#### justify-content: space-evenly
以flexbox的寬度減掉物體的距離後，算出來的平均數值，所以間隔數值相同，不會和flexbox的頭尾邊界相連。

### 改變Flexbox中物體的位置 3: 用 flex-wrap 解決過多物品擠在主軸上的狀況

有時候一個flexbox中會需要10個甚至更多的物件，而flex的本性使然，flexbox中的物體會依照比例來改變自己的寬度以適應flexbox中的大小，而過多的物體會讓物體自身小於要求的寬度。

因此，為了避免出現主同一主軸上有過多的物件，我們可以使用flex-wrap，讓物體在超過範圍時能夠自行換行。

以下圖例以flex-direction:row為主軸方向
主軸：水平
起始點：左
紅色flexbox: width:300px
黑色box: width: 50px

#### flex-wrap:nowrap　（預設屬性）

#### flex-wrap: wrap

#### flex-wrap: wrap-reverse
也可以將換行的方向上下顛倒

#### 補充：父容器的 33.3%
老師在直播課程中提到，若有設定wrap自動換行的話，flexbox中的物件是在自身超過flexbox範圍後，會自動換行。
而在RWD自適應網站中，我們可以透過改變子元件的寬度，以百分比的方式計算來控制子元件在不同設備上的位置變換。

### 改變Flexbox中物體的位置 4: 用 align-items 來改變物體在「交錯軸」上的位置
我們利用主軸改變物體的位置以及排列方向之後，若想改變物體在交錯軸上的位置，就需要使用align-items來改變。

以下圖例以flex-direction:row為主軸方向
主軸：水平
起始點：左
justify-content: center
紅色flexbox: width: 350px; height: 280px;
黑色box: width: 50px

#### align-items: flex-start

#### align-items: center

#### align-items: flex-end

#### align-items: stretch

#### align-items: baseline
看起來跟flex-start一樣，但其實是和文字的baseline對齊。

### align-items 跟 align-content 傻傻分不清楚
在製作第二周任務的時候，不知道為什麼在調整交錯軸上物體的位置時，一直將align-items打成align-content，這兩者的功能有點類似，但總是常被人搞混。

在查詢資料之後才了解，兩者的功能確實都一樣是將物體垂直置中，只是不同的地方在於，align-items是適用於物體在單一主軸線上，也就是畫面呈現上只有一行的的狀況；而align-content則是適用於物體在多條主軸線上，也就是畫面呈現物體排列成兩行以上的狀況。

**也就是說，若父層中所包含的物件需要用到flex-wrap的話，才需要用到align-content！**

##### align-items
圖片來源：[《深入解析CSS Flexbox》-OOXX.STUDIO](https://www.oxxostudio.tw/articles/201501/css-flexbox.html)

##### align-content
圖片來源：[《深入解析CSS Flexbox》-OOXX.STUDIO](https://www.oxxostudio.tw/articles/201501/css-flexbox.html)

## 完成第二周任務學到的額外技巧（一）： background-image

[img vs background-image](https://codepen.io/jiayusally97816/pen/LYZJZdV): 上方為img，下方為background-image

在設計網頁時常常會遇到滿版banner的情形，一開始都會覺得，將img的寬度弄成100%（採頁面寬度）即可，但是使用img有個問題是，img在縮放時的長寬比是固定的，這就有可能造成畫面的比例失衡，而且若是在編寫相同版型的多頁網站的話，在使用img時就必須先經過Photoshop等將多張圖片後製成相同大小或是長寬比的繁複程序。

為解決以上的問題，background-image就成了RWD網頁中滿版banner的常用技巧。

使用background-image的好處：
1. 不用事先將圖片素材都處理成同樣大小或是長寬比
2. 高度可以固定，保住網頁所有物件的位置比例
3. 可以製作[Parallax視差卷軸](https://codepen.io/jiayusally97816/pen/eYzLdZY)（請欣賞我做的ITZY網頁(●｀ 艸 ´)）

那麼，使用background-image的話，需要注意甚麼呢？
1. **要設寬高！**：background-image和img不一樣，它無法單獨成為一個元素，所以background-image和background-color一樣，必須依賴一個元素生存，而他們生效的條件就是—該元素具有存在感（有寬高）。
2. **知道原圖的大小**：若是用大圖的話還好，但若是使用小於你設想寬高的圖片的話，你就會看到重複出現的圖片！！！（background-image預設圖片repeat），若是你強制使用background-size將圖片放大，你就會看到超級！模糊！的圖片！
3. **知道你是用照片的哪個部分**：backgruond-image可以用固定的寬高顯示圖片，但是如果background-position沒有設定好的話，你就看不到你設想的效果。原因是background-image是用你設定的寬高在你給的圖片上框出一個範圍顯示，而background-position的預設值為center，試想一下，你找了一張圖，但圖片的重心是在右上方，但你忘了設定background-position，因此你看到的，只能是一個無法形容的畫面。

## 完成第二周任務學到的額外技巧（二）： 偽元素

## 參考學習資源：
* [圖解：CSS Flex 屬性一點也不難](https://wcc723.github.io/css/2017/07/21/css-flex/)
* [CSS Flexbox Layout 學習心得筆記](https://sweeteason.pixnet.net/blog/post/42781628#a1)
* [浅谈Flex布局的属性及使用](https://juejin.im/post/6844903614209605646)
* [深入解析 CSS Flexbox](https://www.oxxostudio.tw/articles/201501/css-flexbox.html)
* [flex布局中align-items 和align-content的区别](https://blog.csdn.net/sinat_27088253/article/details/51532992)
* [align-items和align-content的区别](https://juejin.im/entry/6844903911690600456)