---
tags: 公益程式體驗營 - 2022
---

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

## 開課提醒
1. 錄影
2. 不需報到
3. 講解[主線任務](https://rpg.hexschool.com/training/29/task)

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

## 外容器常用語法
* 決定流向：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

* 交錯軸對齊：align-items
1. flex-start
2. center
3. flex-end
4. **stretch**
5. baseline

* 換行屬性：flex-wrap
1. **nowrap**
2. wrap
3. wrap-reverse

## 網站範例觀看

- [星巴克](https://www.starbucks.com.tw/home/index.jspx)

## Flex - 垂直與水平置中

  display: flex;
  align-items: center;
  justify-content: center;

## 觀念分享
* 不要亂加語法買保險
* container 與 flex 區分
* 使用 flex 語法務必加上 `display:flex;`

## 證書任務一講解
* Flex 寫法

## 表單填寫

[2022 公益體驗營 - Flex](https://docs.google.com/forms/d/e/1FAIpQLSdHf50KCTbipNVTiAWNXlkpmIeG65DsJ1xKL8v1y3SCu0RjyQ/viewform)

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