---
# System prepended metadata

title: 第二週 - FLEXBOX 多欄式排版全攻略
tags: [公益程式體驗營 - 2022]

---

---
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 - 垂直與水平置中

```css=
  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)