# JS30 - Flex Panels Image Gallery

- 共筆：[JS30 我要成為 JavaScript 大師 - Day05](https://hackmd.io/_eiv7N89RBeozoQuHF_-CA?both#0705-%E4%B8%80-2100%EF%BC%8CDay05-Didi)
- Demo：[JS30 - Flex Panels Image Gallery](https://codepen.io/dadidi910/pen/RwVWJGe)

> By Didi

---

## 課程重點：
利用 <font color=orange>`flex` 的特性</font> 及 <font color=orange>`transition` 的動畫效果</font>
做出點擊後的效果呈現。

<font size=5>由於分享者是金魚腦，請課程結束後再發問唷，懇請大家配合。</font>
<font size=5>（感激到痛哭流涕）</font>

---

這堂課想做出的效果是什麼？

[Flex Panels 💪](https://dustinhsiao21.github.io/Javascript30-dustin/05%20-%20Flex%20Panel%20Gallery/)

---

## Flex ==啟用方式==
<font color=orange>`display: flex;`</font>

設定在父層，此時子層就會變成 flex 的項目。

---

<font color=orange>`flex: 1;`</font> 是什麼？

<font color=orange>`flex： 0 1 auto;`</font> 又是什麼鬼=_=

等等 Demo 告訴你！

---

### ==flex-direction==
定義容器內項目堆疊的方向。
- `flex-direction: row;` 橫排。
- `flex-direction: column;` 直排。

---

問一下大家，現在這個畫面是橫排還是直排？

---

### ==justify-content==：主軸的對齊控制。
- 資料流的對齊：主軸
- <font size=5>`justify-content: flex-start;` 內容資料自起始位置對齊。</font>
- <font size=5>`justify-content: center;` 內容資料置中位置對齊。</font>
- <font size=5>`justify-content: flex-end;` 內容資料自尾位置對齊。</font>

---

### ==justify-content==：主軸的對齊控制。
- 資料流的間距：主軸
- <font size=4>`justify-content: space-around;` 內容資料的間距分配到每個物件的左右。</font>
- <font size=4>`justify-content: space-between;` 內容資料的間距分配到物件之間。</font>

---

### ==align-items==：交叉軸的對齊控制。
- 針對僅單行的子物件。
- <font size=5>`align-items: flex-start;` 對齊資料流次軸起始位置。</font>
- <font size=5>`align-items: center;` 對齊資料流次軸置中位置。</font>
- <font size=5>`align-items: flex-end;` 對齊資料流次軸末端位置。</font>

---

## Transition ==轉換==

<font color=orange size=6>`transition: 屬性 轉換時間 延遲執行時間 速度;`</font>

<font size=5>中文意思為“轉變”
顧名思義它就是為了<font color=orange>改變兩個外觀間轉換的屬性</font>，只要加上transition，
就可以補足兩個外觀間轉換的補間動畫，可以<font color=orange>形成比較平滑的轉換</font>，而不會過於生硬。</font>

---

## <font color=orange>transform</font> 跟 <font color=orange>translate()</font>

改變元素的大小、形狀、方向、位置...等。

---

### <font color=orange>transform: CSS 屬性</font>

使用此屬性，
元素可以被<font color=orange>平移、旋轉、縮放和傾斜</font>。

---

### <font color=orange>translate(): CSS 函式</font>

使用此函式，
在水平或垂直方向<font color=orange>重新定位元素</font>。

---

Demo 時間！緊張阿！！！！

---

### 參考資料 / 資源

* [Flex Panels 💪](https://dustinhsiao21.github.io/Javascript30-dustin/05%20-%20Flex%20Panel%20Gallery/)
* [課程文字解說 - 讚讚]((https://ithelp.ithome.com.tw/articles/10193306))
* [flex:0 1 auto 到底什麼鬼啦！](https://ithelp.ithome.com.tw/articles/10227461)
* [css3貝塞爾曲線(cubic-bezier) 看這邊～](https://kknews.cc/zh-tw/code/4be66p3.html)
* [cubic-bezier(.17,.67,.83,.67) 玩一下啦！](https://cubic-bezier.com/)
* [CSS動畫-Transition](https://ithelp.ithome.com.tw/articles/10200365)
* [Array.prototype.forEach() 的用法 | MDN](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
* [HTMLElement: transitionend event | MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event)

---

這堂課就先到這裡囉！感～謝～大～家～