---
tags: 30 天軟體工程師體驗營｜2025
---
> 建議觀看的影音章節：
> - RWD - 伸縮自如的 RWD 排版術

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

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

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

Desktop：

768px 以下時：

576px 以下時：

375px 以下時：

## 回報流程

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


<!--

解答：
https://codepen.io/yen-kg/pen/zxxEqpe

-->

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1 |Hank_08123 | [Codepen](https://codepen.io/hankyang1213/pen/WbbqKwW)
| 2 | 4chan |[Codepen](https://codepen.io/ijuolaqc-the-looper/pen/yyydEmm?editors=0100)|
| 3 | dean |[Codepen](https://codepen.io/ch933114/pen/RNNzBxY?editors=1100)|
| 4 | Daniel Huang |[Codepen](https://codepen.io/Hou-Chieh-HUANG/pen/PwwrdPY)|
| 5 | 謝天 |[Codepen](https://codepen.io/crisxie/pen/QwwXVWN)|
| 6 | ying |[Codepen](https://codepen.io/Lara-Lin/pen/myyZjmj)|
| 7 | Ataya |[Codepen](https://codepen.io/zin-seven/pen/MYYMqvO)|
|8|小趴|[Codepen](https://codepen.io/papa2415/pen/BaeoObd)|
| 9 | Hugh |[Codepen](https://codepen.io/Hugh-Chen/pen/raaEZyJ)|
| 10 | akkk |[Codepen](https://codepen.io/ak-wu-the-decoder/pen/RNNzeba)|
| 11 | WAWATA |[Codepen](https://codepen.io/wa-wa-GNOHC-WA-Wa/pen/zxxVMPN)|
| 12 | Tetsu |[Codepen](https://codepen.io/ttgchang/pen/WbbqYdV)|
| 13 | RUDY |[Codepen](https://codepen.io/Rudy-crw/pen/qEEzQrj?editors=1100)|
| 14 | stone |[Codepen](https://codepen.io/bgrwlzoz-the-reactor/pen/jEEjpdW)|
| 15 | 7Lun |[Day18-Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/Gggbwwz)|
| 16 | An |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/MYYMzeY?editors=1100)|
| 17 | Michael - 鴿子 |[Codepen](https://codepen.io/KeinSacer_Michael/pen/zxxVeaO)|
| 18 | Melanie |[Codepen](https://codepen.io/pnrcspte-the-animator/pen/PwwrVVQ?editors=1100)|
| 19 | andy |[Codepen](https://codepen.io/ewnblckz-the-styleful/pen/YPPoRqY?editors=1100)|
| 20 | Owen He |[Codepen](https://codepen.io/owen1120/pen/JooQxro?editors=1100)|
| 21 | Chuang |[Codepen](https://codepen.io/uidoytjq-the-solid/pen/bNNPyLv?editors=1100)|
| 22 | pastor |[Codepen](https://codepen.io/peter_hung/pen/XJJLwjG) |
|23|JHT|[Codepen](https://codepen.io/juanht/pen/XJJLPKV)|
|24|力文|[Codepen](https://codepen.io/liwenchiou/pen/zxxgObx?editors=1100)|
| 25 | Josepg_Kyuu |[Codepen](https://codepen.io/zrzfastd-the-reactor/pen/YPPompg)|
| 26 | NAOJUN |[Codepen](https://codepen.io/pzzpvwwp-the-styleful/pen/OPPeBeE)|
| 27 | cks40660 |[Codepen](https://codepen.io/CKS40660/pen/emmqYyZ?editors=1100)|
| 28 | DD |[Codepen](https://codepen.io/dorihung/pen/EaaqaNE)|
| 29 | WEIWEI |[Codepen](https://codepen.io/weiwei93/pen/qEEoqEm)|
| 30 | 随縁 |[Codepen](https://codepen.io/anki0072011/pen/QwwXJER)|
| 31 | Aidd. |[Codepen](https://codepen.io/aiddchen/pen/raaXaKv)|
|32|蛋殼|[Codepen](https://codepen.io/weybrian/pen/OPPKyLZ)
| 33 | BaLaLaYOU |[Codepen](https://codepen.io/bashawxd-the-bashful/pen/KwwOpvB)|
| 34 | nora_zizi |[Codepen](https://codepen.io/Nora-Ch/pen/xbbvwPd)真好玩|
| 35 | ggininder |[Codepen](https://codepen.io/wei900221/pen/OPPKMKb)|
| 36 | William Hsieh |[Codepen](https://codepen.io/lsaimqxa-the-vuer/pen/raaXxJJ?editors=1100)|
| 37 | Aoi |[Codepen](https://codepen.io/zching07/pen/emmqzeJ)|
| 38 | Cyan66 |[Codepen](https://codepen.io/Cyan66/pen/PwwMNaJ)|
| 39 | HawkeyeLin |[Codepen](https://codepen.io/long-long/pen/vEEogLe)|
| 40 | allen3290 |[Codepen](https://codepen.io/udadkudw-the-looper/pen/KwwOaEd)|
| 41 | jingle0900 |[Codepen](https://codepen.io/EvaLi0472/pen/xbbvpyy?editors=1100)|
| 42 | Min |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/pvvMLRX?editors=1100)|
| 43 | B |[Codepen](https://codepen.io/Babel777/pen/xbboaGj)|
| 44 |Klaus Chen |[Codepen](https://codepen.io/Klaus-Chen/pen/MYYNGwj?editors=1100)|
| 45 |柔術小子 |[Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/RNNXbpG)|
| 46 | 林明德 |[Codepen](https://codepen.io/lwescocn-the-vuer/pen/emmqbNg)|
| 47 | Chia__ |[Codepen](https://codepen.io/Chia-the-encoder/pen/WbbVBzM)|
| 48 | Leonard |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/zxxgQXg?editors=1100)|
| 49 | mercury2508. |[Codepen](https://codepen.io/Mercury2508/pen/pvvMXrX)|
| 50 | oyll |[Codepen](https://codepen.io/dizzydog-rgb/pen/OPVLzaJ?editors=1100)|
| 51 | ja4071 |[Codepen](https://codepen.io/SHAO-L/pen/raVNarw)|
| 52 | haohaoliao |[Codepen](https://codepen.io/tqdtaouh-the-styleful/pen/myJdRyO?editors=1100)|
| 53 | Jane |[Codepen](https://codepen.io/jkmx/pen/pvvMyBY)|
| 54 | kelsonhouse|[Codepen](https://codepen.io/Kelson-House/pen/NPqWwJE)|
| 55 | 消波塊 |[Codepen](https://codepen.io/PaulHsiao/pen/qEEeOmm)|
| 56 | wei_0982 |[Codepen](https://codepen.io/nico-lai/pen/oggKdGQ)|
| 59 | tina01170 |[Codepen](https://codepen.io/tina-huang-the-bashful/pen/pvJvREV)|
| 60 | Jessie_Yu | [Jessie_Yu 的 Codepen](https://codepen.io/bakyfkso-the-looper/pen/GgJoRzo)|
| 61 | kent_31665 |[Codepen](https://codepen.io/kentlee406/pen/XJbXREj)|
| 62 | Lynn |[Codepen](https://codepen.io/Yen-Ling-Peng/pen/yyNVLMd?editors=1100)|
| 63 | 禹成林 |[Codepen](https://codepen.io/useirin/pen/wBagEZv)|
| 64 | Astrid |[6/6](https://codepen.io/astrid321654/pen/OPVgWmN?editors=1100)|
| 65 | ann.328 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/zxGpwVx) |
| 66 | JiaMori |[Codepen](https://codepen.io/jiamori/pen/OPVwNKP)|
| 67 | Rogan |[Codepen](https://codepen.io/RoganHsu/pen/YPXjbKr)|

<!--
| number | name |[Codepen]()|
-->