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

# 🏅 切版任務 Day17 - 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 | Meng | [Codepen](https://codepen.io/menglin1203/pen/zYQvJeX) |
| 2 | 小趴 | [Codepen](https://codepen.io/papa2415/pen/BaeoObd) |
| 3 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/gOJadoM)|
| 4 | Emma |[Codepen](https://codepen.io/huang_L/pen/QWRjZjB)|
| 5 | kawa |[Codepen](https://codepen.io/z83xji6/pen/LYopJaE?editors=1100)|
| 6 | s870012 |[Codepen](https://codepen.io/idzrvbnl-the-bashful/pen/rNgOqmB)|
| 7 | tim |[Codepen](https://codepen.io/jskrtivy-the-animator/pen/rNgOqda)|
| 08 | han |[Codepen](https://codepen.io/iamHanCheng/pen/YzbyJqN?editors=0000)|
| 09 | Sammy |[Codepen](https://codepen.io/fsczdlla-the-bold/pen/oNRjPRj)|
| 10 | Jiahe |[Codepen](https://codepen.io/Andywang-95/pen/WNBQayP?editors=1100)|
| 09 | Chia Pin |[Codepen](https://codepen.io/joker-cat/pen/oNRjaQw)|
| 10 | mike_2049 |[Codepen](https://codepen.io/mike2049/pen/XWwmxqb?editors=1100)|
| 11 | Aya | [Codepen](https://codepen.io/NoNameNote/pen/PovPyee) |
| 13 | zaoannihao |[Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/JjqYeGy)|
| 14 | sherry |[Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/eYapPxp)|
| 15 | easonpan | [Codepen](https://codepen.io/easonpan0904/pen/MWdazYa) |
| 16 | 小白 | [Codepen](https://codepen.io/xjbowjbr-the-builder/pen/pomjqJw) |
| 17 | JUN_ | [Codepen](https://codepen.io/Jun-L/pen/LYopMNa) |
| 18 | ninii傳教士 | [Codepen](https://codepen.io/niiniiii/pen/wvbKYOR?editors=1100) |
| 19 | macihuang | [Codepen](https://codepen.io/macy1215/pen/oNRjJOX) |
| 20 | 詹姆士 | [Codepen](https://codepen.io/z111048/pen/LYopqbN?editors=1100) |
| 21 | LYC |[Codepen](https://codepen.io/LY-C/pen/XWwmOVJ)
| 22 | Hailey |[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/XWwmOEb)
| 23 | WEIWEI |[Codepen](https://codepen.io/weiwei93/pen/XWwmoxO?editors=1100)|
| 24 | 白白 |[Codepen](https://codepen.io/YuBai/pen/mdYevNK?editors=0100)|
| 25 | Michelle0417 | [Codepen](https://codepen.io/michelle0417/pen/WNBQmZb) |
| 26 | Winnie |[Codepen](https://codepen.io/codepen-io-winnie/pen/ZENbwQP?editors=1100)|
| 27 | Joey一針 |[Codepen](https://codepen.io/joeychou/pen/jOobJdM)|
| 28 | Kaya |[Codepen](https://codepen.io/kayaribi/pen/WNBQYXv)|
| 29 | yunyouob | [Codepen](https://codepen.io/ozkkvlsu-the-animator/pen/BaeogZe?editors=1100)|
| 30 | Mionne | [Codepen](https://codepen.io/neohyntw/pen/jOobjer)|
| 31 | oyll | [Codepen](https://codepen.io/dizzydog-rgb/pen/NWVGQyg)|
| 32 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/yLWYmmx)|
| 33 | Andy_12 |[Codepen](https://codepen.io/lifann/pen/eYapoob?editors=1100)|
| 34 | JY |[Codepen](https://codepen.io/jylee0805/pen/ZENQzBZ?editors=1100)|
| 35 | Tough life |[Codepen](https://codepen.io/hakuei0115/pen/jOoWOOg)|
| 36 | 薛逢 |[Codepen](https://codepen.io/vogqyrrj-the-selector/pen/eYaJZxm)|
| 37 | 阿若 |[Codepen](https://codepen.io/skar5268/pen/eYaJzRd)|
| 38 | leo.chang |[Codepen](https://codepen.io/s16777216/pen/NWVxreq)|
| 39 | hongru-LyNn |[Codepen](https://codepen.io/LyNnYWu/pen/pomgbYN?editors=1100)|
| 40 | Maxine |[Codepen](https://codepen.io/Maxine0713/pen/QWRyKGp)|
| 41 | Antonio |[Codepen](https://codepen.io/gwhvusel-the-builder/pen/VwOeKMo)|
| 42 | FURUTO |[Codepen](https://codepen.io/oditudnw-the-flexboxer/pen/PovZWEL)|
| 43 | JESS |[Codepen](https://codepen.io/-8412/pen/jOoWmPx)|
| 44 | Linfe |[Codepen](https://codepen.io/Linfe/pen/JjqGaOw)|
| 45 | Ariel |[Codepen](https://codepen.io/ariel0510/pen/jOoWveG)|
| 46 | Zander |[Codepen](https://codepen.io/chuangmaster/pen/NWVxJpm)|
| 47 | jerry |[Codepen](https://codepen.io/sony791210/pen/NWVxJQq)|
| 48 | boin |[Codepen](https://codepen.io/boinji/pen/jOoWRam)|
| 49 | Tanyaaaa |[Codepen](https://codepen.io/tanya77777/pen/wvbMbbx)|
| 50 | Lauren |[Codepen](https://codepen.io/Lauren8/pen/RwmaKzq)|
| 51 | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/oNRxNry) |
| 52 | Camila |[Codepen](https://codepen.io/camilalo/pen/yLWObYj)|
| 53 | Casey |[Codepen](https://codepen.io/Caseyyyyyyyyyyyyyy/pen/BaeKpgg)|
| 54 | peggy |[Codepen](https://codepen.io/peggy0419/pen/oNRxezP)|
| 55 | JIAWUN |[Codepen](https://codepen.io/wkasixgv-the-sasster/pen/LYoNWEr)|
| 56 | LiLiLiLi | [Codepen](https://codepen.io/jungang0414/pen/eYaZXLZ?editors=1100) |
| 57 | sunknight_002 | [Codepen](https://codepen.io/aqortatm-the-solid/pen/VwOaOom) |
| 58 | Angela_la | [Codepen](https://codepen.io/Angela-the-builder/pen/YzbWKYw?editors=1100) |
| 59 | Eden | [Codepen](https://codepen.io/iseden/pen/vYwKZXZ)|
| 60 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/xxNOype?editors=1100)|
| 61 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/qBGOQBX) |
| 62 | 雪粒 | [Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/eYapPxp) |
| 63 | Shen |[Codepen](https://codepen.io/yan-Shen-the-decoder/pen/wvbowQo)|
| 64 | Anna |[Codepen](https://codepen.io/Anna-Teng/pen/BaeQLOE)|
| 65 | Yini Chen |[Codepen](https://codepen.io/CYini/pen/KKLNvVY)|
| 66 | tzhengliin(子恆) |[Codepen](https://codepen.io/tzhengliin/pen/eYagOmB)|
| 67 | maruko1105 |[Codepen](https://codepen.io/marukox1105/pen/OJYpgjN)|
| 68 | emmayo |[Codepen](https://codepen.io/emmayo/pen/mdYWzza)|
| 69 | hao jing |[Codepen](https://codepen.io/hjxu/pen/xxNdwpy?editors=1100)|
| 70 | Anais77 |[Codepen](https://codepen.io/liu-anais/pen/VwOWvyq)|
| 71 | 勾小勻 |[Codepen](https://codepen.io/qkvyujcc-the-encoder/pen/MWdoomb)|
| 72 | Taiwanno1 |[Codepen](https://codepen.io/uhnxswdq-the-typescripter/pen/yLWzmLO?editors=1100)|
| 73 | Amy(咂摳) |[Codepen](https://codepen.io/nnxucgmc-the-builder/pen/abrVoQo?editors=1100)|
| 74 | 毛巾 |[Codepen](https://codepen.io/bqdcjboa-the-solid/pen/mdYqOwP)|
|75|Frank Chiang|[Codepen](https://codepen.io/frankchiang/pen/XWwVVrX)|
|76|Jainee|[Codepen](https://codepen.io/Jainee0110/pen/zYQRMEX)|
|77|ChrisLin|[Codepen](https://codepen.io/vllzfzco-the-reactor/pen/GRaxEMq)|
<!--
| number | name |[Codepen]()|
-->