# 第二週 - FLEXBOX 多欄式排版全攻略

## 開課提醒
1. 錄影
2. [抽獎](https://discord.com/channels/801807326054055996/1234931819770544281)、[小組任務一](https://hackmd.io/7-ZJzLlHRWCKZ_YCsXj-hA)

子恆
y...
ninii傳教士
Amy(咂摳)
白白
Ariel Yao

## 作業+任務突破 2000 份啦！！

1. 有程式碼批改會優先回饋
2. 小節作業盡可能在七天內批改完畢
3. 證書任務盡可能在七天內批改完畢
4. 報到任務會在 14 天內批改完畢

## Flex 介紹
- `display: flex`
- 外容器和內元件
<img src="https://i.imgur.com/HCy9pEX.png" width="300">

## 校長語錄
> 不與他人比較，專注跟過去的自己比較

## Flex 教學(上)
* container 介紹，直接寫個小範例
* 口訣1：內元件要有效果，就要在外容器加上 display:flex
* 口訣2：每個 HTML 標籤，能同時擁有內元件跟外容器身份
* Flex 主軸與交錯軸觀念([測試工具](https://codepen.io/peiqun/pen/WYzzYX))
* 容器
* <span style="color:red">1.紅(外容器)：container</span>
* <span style="color:blue">2.藍(內元件)：item</span>
* <span style="color:purple">3.粉紅(內元件+外容器特性)</span>
* <span style="color:black">4.黑(一般元素)：無 flex 效果</span>

`老師個人註記：#004466 #00ffa2`

## 外容器常用語法
* 決定軸線：flex-direction (互動詢問)
* 1.**row**
* 2.row-reverse
* 3.column
* 4.column-reverse
* 主軸對齊：justify-content (開始代入範例)
* **1.flex-start (預設)**
* 2.center
* 3.flex-end
* 4.space-between
* 5.space-around
* 6.space-evenly

* 換行屬性：flex-wrap
* 1.**nowrap(預設)**
* 2.wrap

* 交錯軸單行對齊：align-item
* 1.flex-start
* 2.center
* 3.flex-end
* 4.**stretch(預設)**
* 5.baseline
* 交錯軸多行對齊屬性：[align-content](https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-content)

* 設計一個六角小官網(區塊元素+Flex 練習 Section 練習)

## 網站範例觀看
* [Apple - justify-content](https://www.apple.com/tw/shop/buy-mac/macbook-pro/16-%E5%90%8B)
* [嘖嘖](https://www.zeczec.com/)

## 中場休息
1. 小組任務一抽獎：3本
2. 講解[線下網友見面會](https://www.notion.so/2024-2c991cc29eaa49bfa643a90526a12f4a) - 建議想做自己作品的學員再來，也會提供線上場
3. 分組部分
* 如果一組內有 3 人願意討論，並有約線上一天的討論那建議就繼續經營，例如可約一起看完哪些影音課程後再討論，也會比較有動力
* 假使這週期間，一組內只有 2 個人零星討論，組員討論有共識後，可到大廳申請併組，找更多的戰友
申請併組時，可分享你們小組目前學習程度、每週的哪一天進行線上討論

## Flex 教學(下) - 垂直與水平置中
* 交錯軸對齊：align-items，畫四張圖軸線圖解釋
* Flex 裡還可以包 Flex
* [時光屋範例 Jason Wang](https://codepen.io/JW750625/pen/oNXQyWK)
* [hexschool](https://www.hexschool.com/)
> 富不過三代，無法到第三層

## 主線任務一講解
1. [切版任務作業一 - 個人品牌網站 - 開發經驗卡片設計](https://rpg.hexschool.com/#/training/12062289980032551059/board/content/12062289980032551060_12062289980032551075)
2. 分享小組任務

## 卡斯伯進修諮詢

每週日的早上 10:00-12:00，我想跟大家分享接下來的課程
如果你喜歡這種團體的培訓形式，歡迎線上預約參加
因為現場我想盡可能回覆同學們各種問題，例如：

### 方案一：團體諮詢：

日期：5/12(日)、5/19(日)、5/26(日) 自選一天
時間：週日早上 10 點開始
人數：限量 20 人
地點：線上（申請後會收到諮詢連結）

https://calendly.com/hexschool/2024-new-hexschool-course

### 方案二：個人諮詢：如果想要談的內容，比較偏向個人的（職涯、學習方法、其他問題等...）

可以先填寫個人資訊後，即可預約諮詢（填寫個人資訊以便我們更快認識你）
時間：每週二多個時段，每個人獨立申請

https://hex.school/LjUzS

## Flex 補充資源
* [圖解：CSS Flex 屬性一點也不難](https://wcc723.github.io/css/2017/07/21/css-flex/)
* [卡斯伯完整 Flex 影音教學(40分鐘)](https://www.youtube.com/watch?v=lmBM7_OTDBQ)

## Flex 補充資源

* [圖解：CSS Flex 屬性一點也不難](https://wcc723.github.io/css/2017/07/21/css-flex/)
* [Flexbox Froggy](https://flexboxfroggy.com/)
* [Flexbox 海盜](https://hexschool.github.io/flexbox-pirate/index.html)
* [Flexbox Codepen](https://codepen.io/peiqun/pen/WYzzYX)