---
# System prepended metadata

title: 第二堂 Flex

---

本頁連結：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
- 第四週要包含多頁式的管理



