本頁連結：https://hackmd.io/yVyF8dSvSr6L7P_ya0GQxw

# 第二堂 Flex 網頁排版術

1. 錄影
2. 感謝作業討論頻道與大群討論伙伴
4. 作業說明：主線作業

## 校長語錄

> 不與他人比較，專注跟過去的自己比較

## 活動提醒

- 專題班分組已經開始

1. 助教帶你做作業 - 直播課期間的每週六早上九點（連結會在 Discord 公告）
2. [同學們的分享會](https://hackmd.io/KxDPrWN5QhydzU6QCmw-3A)
可以分享的主題：
- 陪伴寫作業 ✅
- 筆記工具推薦 ✅
- 個人學習方式 ✅
- 工作經驗分享 ✅
- 個人的休閒、減壓方式 ✅
- 直播帶貨、個人政治傾向辯論 ❌
4. [Kata 大挑戰](https://casper-wang.notion.site/2025-21e2a065e9db80e5869ae775d96a7232)

## Flex 教學(上)

為什麼要使用 Flex？
- 傳統區塊元素的問題
- 解決更複雜的排版需求

Flex 基礎觀念
- Flex 外層容器介紹，直接寫個小範例
- 內元件要有效果，就要在外容器加上 display:flex
- 每個 HTML 標籤，能同時擁有內元件跟外容器身份
- Flex 主軸與交錯軸觀念([測試工具](https://codepen.io/Wcc723/pen/YzbxBxp))

## 外容器常用語法

Emmet 教學：https://docs.emmet.io/cheat-sheet/

#### 口訣：先專注在主軸的走向

- 決定軸線：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://shopee.tw/)

## Flex 教學(下) - 垂直與水平置中

- 交錯軸對齊：align-items，畫四張圖軸線圖解釋
- Flex 裡還可以包 Flex
- [時光屋範例 Jason Wang](https://codepen.io/JW750625/pen/oNXQyWK)
- [hexschool](https://www.hexschool.com/)
- margin 在 Flex 中的神奇運用方式

口訣：
1. 先專注在主軸的走向
2. Flex 一次只解決單向問題（當遇到相簿等巢狀格式，請一層一層處理）

## Flex 實戰技巧案例

- 導覽列
- 三欄式、四欄式
- 多欄換行
- 等高卡片
- 交錯時間軸

## Flex 補充資源

- [圖解：CSS Flex 屬性一點也不難](https://wcc723.github.io/css/2017/07/21/css-flex/)
- [卡斯伯完整 Flex 影音教學](https://www.youtube.com/watch?v=88ymaHaStoQ)
- Bootstrap 怎麼實作 Flex

## 第二堂主線任務(只能用 GitHub Pages 提交)

- [作業設計稿](https://www.figma.com/design/WQh5XkQtQYB0yhIGx5wnMB/%E5%85%AD%E8%A7%92%EF%BD%9C%E9%9E%8B%E5%AD%90%E9%9B%BB%E5%95%86-W1%E3%80%81W2-%EF%BC%88student-ver.%EF%BC%89?t=dL2V2T5U4a3uZCYp-0)（僅供有參加切版直播班授權同學）

備註一：可觀看 [作業設計稿 - 線上預覽操作教學](https://hackmd.io/MHtEdMRuT_G1A3yogcvLtw?view)

備註二：一定要使用 GitHub Pages 提交

> 此主線任務在一天內完成算合格
一小時內完成算超乎水準，熟練度很高

## 下週預習

本文件連結：https://hackmd.io/1unuaLHzStmyXfZiCmKHJQ

#### 第三堂：伸縮自如的 RWD 手機網頁排版術

- 第三週 RWD 直播錄影 - 上半部
- 第三週 RWD 直播錄影 - 下半部
- 常見版型佈局設定
- 容器與內容分離的格線系統設計

#### 第四堂：多頁式網頁設計

- 第四週 - GGV 任務 - 前端任務管理工具教學（可以先預習看看）

## 第三、四週主線任務

- 提前提供[設計稿](https://www.figma.com/design/CYjKvZQo3db8xYCp6DCkKj/%E5%85%AD%E8%A7%92%EF%BD%9C%E9%9E%8B%E5%AD%90%E9%9B%BB%E5%95%86-W3%E3%80%81W4-%EF%BC%88student-ver.%EF%BC%89?node-id=12008-13570&p=f&t=gupY2kpz29uFZ0L8-0)
- 第三週只要做首頁 RWD
- 第四週要包含多頁式的管理