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

## 開課提醒
1. 錄影
2. [線下網友見面會 21:00 準時報名](https://chalk-freedom-ec6.notion.site/2025-1eb6ab47eb4880dfb3f4ee3ee7806975?pvs=4)
3. [本日課程問題討論區 Discord](https://discord.com/channels/801807326054055996/1349590145891958785/1369581442555973712)
4. 每日任務抽獎！
* 1367289418087399525
* 1367651805562929152
* 1368014193403629598
* 1368376581013114951
* 1368738969201672312
* 1369101357289836547

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

1. 有程式碼批改會優先回饋
2. 小節作業盡可能在七天內批改完畢
3. Flex 切版任務 - 部落格文章卡片設計會在十四天內批改完畢

## 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/)

## 中場休息

2. 講解[線下網友見面會](https://chalk-freedom-ec6.notion.site/2025-1eb6ab47eb4880dfb3f4ee3ee7806975?pvs=4) - 建議想做自己作品的學員再來，也會提供線上場

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

## 主線任務一講解
1. [切版任務作業一 - 個人品牌網站 - 開發經驗卡片設計](https://rpg.hexschool.com/#/training/12062817613289895665/board/content/12062817613289895666_12062817613289895682?tid=12062817613290016875)

## 進修職涯諮詢

### 方案一：能量補給站

每週會有 2~3 位軟體工程師的學長姐，在分享自己的開發歷程，如果背景有相符，歡迎透過他們的討論串來進行提問互動

[>>前往和學長姐交流<<](https://discord.com/channels/801807326054055996/1367053873944072213)

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

可以先填寫個人資訊後，即可預約諮詢（填寫個人資訊以便我們更快認識你）

* [>>申請一對一個人諮詢<<](https://hexschool.tw/AbVSb)

## 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)