---
# System prepended metadata

title: 第二週 - FLEXBOX 多欄式排版全攻略
tags: [30 天軟體工程師體驗營｜2025]

---


# 第二週 - 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)