---
tags: 軟體工程師體驗營 - 2023
---

# 🏅 切版任務 Day18 - Flex 與 RWD 練習

練習運用 flex 技巧並隨著瀏覽器寬度變換排版

## 題目
複製此 [Codepen](https://codepen.io/hexschool/pen/ZEqeVza) 模板，依照以下斷點呈現出對應畫面：

Desktop：

768px 以下時：

576px 以下時：

375px 以下時：

## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


<!--

解答：
https://codepen.io/hexschool/pen/YzJZdQz?editors=1100

-->

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1 | 冬天#5215| [Codepen](https://codepen.io/winter_/pen/BaqvpyL)|
| 2 | 黑白兔#0684| [Codepen](https://codepen.io/johnny329/pen/dygwOew)|
| 3 | Ann Chou#0146| [Codepen](https://codepen.io/annchou_illu/pen/LYgMxWw)|
| 4 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/gOBZgog) |
| 5 | jia yu#8896 | [Codepen](https://codepen.io/fjqxaznl-the-reactor/pen/GRYPrYW) |
| 6 | connieK#2848 | [Codepen](https://codepen.io/eaksloky-the-sans/pen/eYPbgwa) |
| 7 | 陳庭#3529 | [Codepen](https://codepen.io/yuting850309/pen/gOBZgGL?editors=1100) |
| 8 | 史滴芬#4310 | [Codepen](https://codepen.io/steven870107/pen/dygwNNb) |
| 9 | henrykgb#5749 | [Codepen](https://codepen.io/henrymorgan666/pen/abRPJOO)|
| 10 | Eero#1147 | [Codepen](https://codepen.io/Eero-Chiao/pen/MWPZJdL)|
| 11 |Snadra#1987| [Codepen](https://codepen.io/mlqmhltg/pen/ExdGZBY)|
| 12 |judy123#2363| [Codepen](https://codepen.io/hsuantsong/pen/yLRGMJr)|
| 13 |JimWang#6134| [Codepen](https://codepen.io/Jim-Wang-the-selector/pen/JjmwWjY)|
|14|汪汪#4486|[Codepen](https://codepen.io/hunwooooof/pen/oNaJZwZ)|
|15|Ataraxia#9977|[Codepen](https://codepen.io/ataraxia8888/pen/abRPpxb)|
| 16 | Kaya#8857 | [Codepen](https://codepen.io/laron9486/pen/YzJdZpQ) |
| 17 | Tami#6742 | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/ExdGWwK) |
18| 雲漢#5319|[codepen](https://codepen.io/keon981/pen/poxqePm?editors=1100) |
|19| satarkuo#5736|[codepen](https://codepen.io/SatarKuo/pen/ExdGWQy?editors=1100) |
|20| Tina02#2691 | [codepen](https://codepen.io/Tina02/pen/jOeXmNE) |
|21|Quantum#6093|[Codepen](https://codepen.io/Min-Hao-Hung/pen/JjmwWQy)|
|22|依依#6306|[Codepen](https://codepen.io/Rita-Yang/pen/qBJLreV?editors=1100)|
|23| Jacky7035#9423 |[Codepen](https://codepen.io/adens123/pen/KKGbWbP)|
|24| Elma#4317|[Codepan](https://codepen.io/4317/pen/wvYRddv)
|25| moins13#3346|[Codepan](https://codepen.io/kyechen13/pen/VwEqbWE)
26| Daisy_li#4231|[codepen](https://codepen.io/lidairong-gmail-com/pen/RweEKQR)
27| gahwa#3562|[codepen](https://codepen.io/lidairong-gmail-com/pen/RweEKQR)
|28| Hao#2485 |[Codepan](https://codepen.io/Seanfeb16/pen/abRPwvQ)
|29| DyH#0526 |[Codepan](https://codepen.io/dorihung/pen/KKGbqgy?editors=1100)
| 30 | ChaosTu#9311 | [Codepen](https://codepen.io/torotu/pen/wvYReJJ?editors=1100) |
| 31 | Döng#2328 | [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/poxqwKZ?editors=1100) |
|32| しあわせね#0036 |[Codepan](https://codepen.io/Front-end-engineer/pen/oNaJwGN?editors=1100)
|33| CuraLin#2648 |[Codepan](https://codepen.io/curalin/pen/vYVvZvX?editors=1100)
|34| chichi#1534 |[Codepan](https://codepen.io/chichihuang/pen/KKGbWNE)
|35| alll6z#9204 |[Codepan](https://codepen.io/A6Z/pen/wvYRejq)
|36| peihsuan#6315 |[Codepan](https://codepen.io/peihsuanlai/pen/QWZzMvY)
|37| vvay#4113 |[Codepan](https://codepen.io/pellmssx-the-sasster/pen/rNqowrP)
|38| boki#3717 |[Codepan](https://codepen.io/hexschool/pen/YzJZdQz?editors=1100#_=_)
|39| 兔子#6746 |[Codepan](https://codepen.io/CarrotDetector/pen/NWOewZM)
|40| Akira#9996 |[Codepan](https://codepen.io/Akira-Chen/pen/KKGbyBe)
|41| Uli#1946 |[Codepan](https://codepen.io/uli1313/pen/gOBZvGJ)
|42| 浪裡小白龍#6860 |[Codepan](https://codepen.io/Emillo/pen/dygwJrJ?editors=1100)
|43|wiimax#4564|[Codepen](https://codepen.io/willismax/pen/XWxoZyZ)
|44|HsuanTang#1349|[Codepen](https://codepen.io/HsuanTang/pen/poxqdqO)
|45|Yuu#5361|[Codepen](https://codepen.io/alycehwy/pen/ExdGLPa)
|46|N0c7iluc3n7#4390|[Codepen](https://codepen.io/huang-yu-cheng/pen/BaqvxyY)
|47|SKey#9905|[Codepen](https://codepen.io/Dale-Chien/pen/ExdGEez)
|48| 銀光菇#1692 | [Codepen](https://codepen.io/genesynthesis/pen/MWPZVoX) |
|49| Jennifer Chuang#3937 | [Codepen](https://codepen.io/yujhen/pen/abRPEZv) |
|50| Rayo#8002 | [Codepen](https://codepen.io/loborayo/pen/xxymzxr) |
|51| Kulimusoda#2785 | [Codepen](https://codepen.io/yuch3n_chen/pen/qBJLYgj) |
|52|司機叔叔#2463 | [Codepen](https://codepen.io/bigv5566/pen/yLRGjQL) |
|53|David0799#4415 | [Codepen](https://codepen.io/David0799/pen/YzJdvmo) |
|54|andrew0404#4576| [Codepen](https://codepen.io/Loonng/pen/zYmyaPE) |
|55|Janet#5784| [Codepen](https://codepen.io/janetlinnn/pen/WNaLyBo) |
| 56 | Lychee KK | [Codepen](https://codepen.io/kakakala/pen/mdzaKaN)|
| 57 | 翔.#0859 | [Codepen](https://codepen.io/energy95272z/pen/WNaLKdZ?editors=1100)|
| 58 | 姜承#8204 | [Codepen](https://codepen.io/Troy0718/pen/KKGbGPK)|
|59|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/NWOemqM)
|59|PayRoom#8328|[CodePen](https://codepen.io/aaagoodaa/pen/poxqBwY)
|60|HsienLu#8316|[coddepen](https://codepen.io/Hsienlu/pen/rNqobJa)|
|61|DeLi#8324|[coddepen](https://codepen.io/delichaomoon/pen/dygwLBZ)|
|62|snow#0255|[coddepen](https://codepen.io/snow21723/pen/KKGbjGR)|
|63|Berlin#7338|[coddepen](https://codepen.io/3qberlin/pen/QWZzPVP)|
| 64 | 辣椒#1002 | [Codepen](https://codepen.io/chilichen118/pen/ZEqVjoq) |
| 65 | 張金#7225 | [Codepen](https://codepen.io/changxchieh/pen/NWOoKox) |
| 66 | Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/JjmwZKO) |
| 67 | alan0305#2423 | [CodePen](https://codepen.io/alan0305/pen/MWPLwYa) |
| 68 | bonnieli1414#4906 | [Codepen](https://codepen.io/bonnieli1414/pen/LYgqVag?editors=1100) |
| 69 | JimmyHuang#5281 | [Codepen](https://codepen.io/JimmyHuang369/pen/vYVbNPG) |
|70|肉個阿倫#7172|[Codepen](https://codepen.io/i9574385/pen/yLRZOge)|
|71|吳偉雄恩#2256|[Codepen](https://codepen.io/Bamboo1212/pen/WNaPwKQ?editors=1100)|
|72|YHT#1696|[Codepen](https://codepen.io/YHT31/pen/MWPLYQN)|
|73|鉦勝#8333|[Codepen](https://codepen.io/atckmax823/pen/zYmejvQ?editors=1100)|
|74|Ting.66#0912|[Codepen](https://codepen.io/Ting66/pen/QWZzXer?editors=1100)|
|75|MitA#7407|[Codepen](https://codepen.io/hexschool/pen/YzJZdQz)|
|76|Aritan#1931|[Codepen](https://codepen.io/Aritan/pen/zYmeLGR)|
|77|jimhop#6510|[Codepen](https://codepen.io/jimsansssss/pen/gOBqBZJ)|
|78|weiting#3489|[Codepen](https://codepen.io/weiting14/pen/YzJBOxN?editors=1100)|
|79|K（アギルダー）#0386|[Codepen](https://codepen.io/klay376014/pen/ZEqwPKv)|
|80|Lainie#1931|[Codepen](https://codepen.io/Lainie88/pen/KKGJYWx)|
|81|yoyo#1003|[Codepen](https://codepen.io/pen/GRYzgbB)|
|82|小魚＃8614|[Codepen](https://codepen.io/gizelliang/pen/JjmzbKE)
| 83 | Zhong#8917 | [Codepen](https://codepen.io/klfjrlod-the-sasster/pen/gOBEgep) |
| 84 | 小華#3204 | [Codepen](https://codepen.io/franfranfran/pen/qBJvXMb?editors=1100) |
| 85 | 長方形#9612 | [Codepen](https://codepen.io/imjjw/pen/poxGZbP) |
|86|鄭舜仁#6606|[Codepen](https://codepen.io/randomno/pen/wvYOQZo) |
| 87 | Rey#1878 | [codepen](https://codepen.io/yfatgmpc-the-bold/pen/poxYqQQ?editors=1100) |
| 88 | penny#6214 | [codepen](https://codepen.io/penny8989/pen/zYmbbER?editors=1100) |
| 89 | Sonia Wu#7154 | [codepen](https://codepen.io/YUJOU/pen/KKGEZGr) |
| 90 | JasonChang#7847 | [codepen](https://codepen.io/jsonChangJava/pen/YzJMpVx) |
|91|Yvonne#2721|[codepen](https://codepen.io/Evonne/pen/KKGEydM) |
|92|townyuan#2653|[codepen](https://codepen.io/townyuan/pen/QWZoREY) |
| 93 | 東東#5015 | [Codepen](https://codepen.io/wearymask/pen/vYVMYbo) |
| 94 | wendyli#2155 | [Codepen](https://codepen.io/rockayumitw/pen/dygEMqR?editors=1100) |
| 94 | 歐陽龍龍#1061 | [Codepen](https://codepen.io/dizzydog-rgb/pen/ExdzgYL) |
| 95 | Celia#1715 | [Codepen](https://codepen.io/drdrvpgf-the-bashful/pen/QWZRWgb?editors=1100) |
| 96 | 杰_jie#9088 | [Codepen](https://codepen.io/hmj8805/pen/abRrdqX) |
| 97 | PoWei#8484 | [Codepen](https://codepen.io/harrison-wei-lai/pen/zYmQprj) |
| 98 | FiReBrO#0557 | [Codepen](https://codepen.io/firebro42/pen/PoyrPzd) |
| 99 | NathanJames#8120 | [Codepen](https://codepen.io/ufo060204/pen/qBJzKLb) |
| 100 | FanJJ#8061 | [Codepen](https://codepen.io/yfchenn/pen/yLRddqN) |
| 101 | 小明#4408 | [Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/LYgwRqq) |
| 102 | liam9930#4129 | [Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/LYXPLQR?editors=1100) |
|103|阿榮#8277|[Codepen](https://codepen.io/codeitaday/pen/gOQYxgZ)|
|104|初心#9021|[Codepen](https://codepen.io/winter_/pen/BaqvpyL?editors=1100)|
|105|lishuan#3698|[Codepen](https://codepen.io/lishuan/pen/GRwgqYm)|
|106|路人ADCB#9851|[Codepen](https://codepen.io/markyourpage/pen/RwqWLpM)|
|107|cmlb0212|[Codepen](https://codepen.io/Chungmin0212/pen/PoxZwoz)|
|108|慢慢來#4035|[Codepen](https://codepen.io/kikiyang/pen/BaGjdxd?editors=0100)|
|109|jun777#2468|[Codepen](https://codepen.io/js18151102/pen/poQLmqW?editors=1100)|
|110|betty#0693|[Codepen](https://codepen.io/betty-hu/pen/JjeaGGq?editors=1100)|