---
# System prepended metadata

title: "\U0001F3C5 切版任務 Day10 - flex 運用"
tags: [軟體工程師體驗營 - 2024]

---

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

# 🏅 切版任務 Day10 - flex 運用

## 問題 
練習運用 flex 語法切版：

![](https://i.imgur.com/9HxP9aq.png)
![](https://i.imgur.com/Uw3eV9V.png)


文字提供:
    
最新資訊
促銷活動
休閒鞋類
工作鞋類
兒童鞋類
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti quis, vero quaerat debitis ea omnis ratione? Voluptatem, quibusdam dolor reprehenderit recusandae minima voluptates accusantium asperiores molestias? Saepe eveniet fugiat asperiores. Tempora assumenda omnis harum explicabo. Ipsa, tempora sequi! Aliquam excepturi id illo perferendis fuga eligendi doloremque, praesentium recusandae minus quam et odio tempore sequi qui? Facere quasi ipsum corrupti culpa.
上一頁
下一頁



## 回報流程

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

![](https://i.imgur.com/vftL5i0.png)

<!-- 

解答：
ㄏㄏ

-->


回報區
---

| 報數 | Discord 名字 |                         Codepen／其他回饋                         |
|:----:|:------------:|:-----------------------------------------------------------------:|
| 1 | 白白 | [Codepen](https://codepen.io/YuBai/pen/yLrmeQV?editors=1100)    |
| 2 | Camila | [Codepen](https://codepen.io/camilalo/pen/KKLPdxr)         |
| 3 | Meng | [Codepen](https://codepen.io/menglin1203/pen/KKLPZaL)       |
| 4 | Larry | [Codepen](https://codepen.io/larrylinr5/pen/oNRvpyo?editors=1100) |
| 5 | Michelle0417 | [Codepen](https://codepen.io/michelle0417/pen/yLWBpoB)       |
| 6 | Annie.ch | [Codepen](https://codepen.io/Anniechang/pen/PovYQqv)        |
| 7 | Emma | [Codepen](https://codepen.io/huang_L/pen/KKLPQMM)|
| 8 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/LYoPQZr)|
| 9 | Eden | [Codepen](https://codepen.io/iseden/pen/bGybLWV)|
| 10 | mike_2049 | [Codepen](https://codepen.io/mike2049/pen/ZENzrGL)|
| 11 | 詹姆士 | [Codepen](https://codepen.io/z111048/pen/jOoNZpB)|
| 12 | Eileen | [Codepen](https://codepen.io/Eileen-io/pen/RwmbQLm)|
| 13 | JUN_ | [Codepen](https://codepen.io/Jun-L/pen/eYaOVGG)|
| 14 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/BaeBYMz)|
|  15  | oyll | [Codepen](https://codepen.io/dizzydog-rgb/pen/bGybLmw) |
|  16  | zuien1120 | [Codepen](https://codepen.io/anki0072011/pen/gOJYvJP?editors=1100) |
|  17  | Chia Pin | [Codepen](https://codepen.io/joker-cat/pen/gOJYevW) |
|  18  | s870012 | [Codepen](https://codepen.io/idzrvbnl-the-bashful/pen/bGybvOv) |
|  19  | jerry | [Codepen](https://codepen.io/sony791210/pen/yLWBKME) |
|  20  | WEIWEI | [Codepen](https://codepen.io/weiwei93/pen/WNBeMrv?editors=1100) |
|  21  |     Aya      |        [Codepen](https://codepen.io/NoNameNote/pen/OJYLVrX)         |
|  22  | Chingya | [Codepen](https://codepen.io/chingya1214/pen/wvbwmyP) |
|  23  | macihuang | [Codepen](https://codepen.io/macy1215/pen/WNBeMVj) |
|  24  | tzhengliin(子恆) | [Codepen](https://codepen.io/tzhengliin/pen/BaeBxzP) |
|  25  | Ariel | [Codepen](https://codepen.io/ariel0510/pen/vYwBRgL?editors=1100) |
|  26 | 小米 | [Codepen](https://codepen.io/hlgudwue-the-typescripter/pen/QWRLQrG) |
|  27  | yuling | [Codepen](https://codepen.io/igzdflpu/pen/ZENzxLM) |
|28|mike00712| [Codepen](https://codepen.io/buliyuil-the-animator/pen/mdYbXXN) |
|  28  | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/wvbwjdQ) |
|  29  | boin | [Codepen](https://codepen.io/boinji/pen/KKLPovR) |
|  30  | JY | [Codepen](https://codepen.io/jylee0805/pen/vYwBdZP?editors=1100) |
|  31  | Daphne | [Codepen](https://codepen.io/DaphneShen/pen/xxNKjdR) |
|  32  | jerry_66983 | [Codepen](https://codepen.io/Barry-C/pen/MWdgXEo?editors=1100) |
|  33  | asabulu_von_f | [Codepen](https://codepen.io/asabulu/pen/mdYbLyB?editors=1100) |
|  34  | kawa | [Codepen](https://codepen.io/z83xji6/pen/QWRLxwb) |
|  35  | 阿宸 | [Codepen](https://codepen.io/xnocndjt-the-sans/pen/MWdgGXa?editors=1100) |
|  36  | Angela_la | [Codepen](https://codepen.io/Angela-the-builder/pen/PovYerL?editors=1100) |
|  37  | JESS | [Codepen](https://codepen.io/-8412/pen/JjqPBZj) |
|  38  | Winnie | [Codepen](https://codepen.io/codepen-io-winnie/pen/VwOZxJd?editors=1100) |
|  39  | peggy | [Codepen](https://codepen.io/peggy0419/pen/XWwrYoq) |
|  40  | yunyouob | [Codepen](https://codepen.io/ozkkvlsu-the-animator/pen/rNgBrEX)|
|  41  | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/QWRLxzp?editors=1100)|
|  42  | brucelee0629 | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/OJYLwmp?editors=1100)|
|  43  | Finley_97025 | [Codepen](https://codepen.io/Jamie-Lin-the-selector/pen/gOJYdOo?editors=1100) |
|  44  | Evelyn | [Codepen](https://codepen.io/cai_yu/pen/RwmbyeB)|
|  45  | Jiahe | [Codepen](https://codepen.io/Andywang-95/pen/YzbKvdo)|
|  46  | Joey一針 | [Codepen](https://codepen.io/joeychou/pen/vYwBVZP) |
|  47  | Elva Su | [Codepen](https://codepen.io/evensu_/pen/jOoNKgL)|
|  48  | hongru-LyNn | [Codepen](https://codepen.io/LyNnYWu/pen/abroaoO?editors=1100) |
|  49  | Mionne | [Codepen](https://codepen.io/neohyntw/pen/jOoNvMJ)|
|  50  | Jenny_7314 | [Codepen](https://codepen.io/Jenny_000/pen/LYoPgaa?editors=0100) |
|  51  | Lauren | [Codepen](https://codepen.io/Lauren8/pen/eYaOQpj?editors=1100) |
|  52  | Kaya | [Codepen](https://codepen.io/kayaribi/pen/bGybQmL) |
|  53  | KUN. | [Codepen](https://codepen.io/barry91205/pen/xxNKmRO) |
|  54  | Maxine | [Codepen](https://codepen.io/Maxine0713/pen/eYaOQQo) |
|  55  | Yuwen | [Codepen](https://codepen.io/Yuwen-the-reactor/pen/MWdgQab) |
| 56 | Maca | [CodePen](https://codepen.io/uimaca/pen/PovYXNR?editors=1100) |
|  57  | Arvin | [Codepen](https://codepen.io/arvinyang1925/pen/ZENzVLz) |
|  58  | Tanyaaaa | [Codepen](https://codepen.io/tanya77777/pen/oNRvJZW) |
|  59  | FURUTO | [Codepen](https://codepen.io/oditudnw-the-flexboxer/pen/OJYLrKG) |
| 60 |james867.|[Codepen](https://codepen.io/JCT34/pen/mdYbGoz)|
| 61 |Antonio|[Codepen](https://codepen.io/gwhvusel-the-builder/pen/BaeBrKW)|
|  62  | Andy_12 | [Codepen](https://codepen.io/lifann/pen/VwOZqgX?editors=1100) |
|  63  | Hailey | [Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/BaeBMqj?editors=1100) |
|  64  | Tough life | [Codepen](https://codepen.io/hakuei0115/pen/eYaOxqr) |
|  65  | Zander | [Codepen](https://codepen.io/chuangmaster/pen/ExzYLLN) |
|  66  | 小趴   | [Codepen](https://codepen.io/papa2415/pen/NWVWWwa) |
|  67  | LiLiLiLi | [Codepen](https://codepen.io/jungang0414/pen/MWdWWRL)  |
|  68  | LGJason | [Codepen](https://codepen.io/j811108/pen/ExzxxRz) |
|  69  | .zack_p | [Codepen](https://codepen.io/Designer-PH/pen/rNgNVNW?editors=1100) |
|  70  | LYC | [Codepen](https://codepen.io/LY-C/pen/dyEbjOy) |
|  71  | oldan | [Codepen](https://codepen.io/Enix-Chien-/pen/mdYdJbz) |
|  72  | 勾小勻 | [Codepen](https://codepen.io/qkvyujcc-the-encoder/pen/zYQYGej) |
|  73  | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/gOJOpbq?editors=1100) |
|  74  | damon0323 | [Codepen](https://codepen.io/swk9eny2/pen/VwOweZm) |
| 75 | maru3096 | [Codepen](https://codepen.io/deamru/pen/JjqjRYG) |
|  76  | 阿若 | [Codepen](https://codepen.io/skar5268/pen/xxNxEqV) |
|  77  | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/GRaRjqO) |
|  78  | MY | [Codepen](https://codepen.io/ahmomoz/pen/MWdgLLO) |
|  79  | Anna |[Codepen](https://codepen.io/Anna-Teng/pen/ZENELzv)|
|  80 | CrystlLala | [Codepen](https://codepen.io/crystallala/pen/zYQYNWb) |
|  81  | leo.chang | [Codepen](https://codepen.io/s16777216/pen/eYaYgEL) |
|  82  | Casey | [Codepen](https://codepen.io/Caseyyyyyyyyyyyyyy/pen/PovoPep) |
|  83  | ninii傳教士 | [Codepen](https://codepen.io/niiniiii/pen/ExzxWXV?editors=1100) |
|  84  | Chen | [Codepen](https://codepen.io/yingchangchen/pen/ExzxQVm) |
|  85  | JIAWUN | [Codepen](https://codepen.io/wkasixgv-the-sasster/pen/gOJOwQd)|
| 86 | kevinwen2014 | [Codepen](https://codepen.io/wenwoo/pen/mdYdGNK) |
| 87 | 秀 | [Codepen](https://codepen.io/Alyssa-CHEN-the-bashful/pen/XWwWopr) |
| 88 | ss585801 | [Codepen](https://codepen.io/ss585801/pen/LYoYrKX?editors=1100) |
| 89  | suandme | [Codepen](https://codepen.io/su-su-the-sans/pen/gOJOgdm) |
| 90  | Mico | [Codepen](https://codepen.io/Mico-the-bold/pen/abrbewO) |
|  91  | 薛逢 | [Codepen](https://codepen.io/vogqyrrj-the-selector/pen/abrojJx) |
|  92  | Aasta | [Codepen](https://codepen.io/Aasta-the-typescripter/pen/yLWybmM?editors=1100) |
| 92 | easonpan | [Codepen](https://codepen.io/easonpan0904/pen/XWwJVZr) |
| 93 | yo0x0oy | [Codepen](https://codepen.io/Dayton-Hsieh/pen/rNgaZwg)|
| 94 | Yini Chen | [Codepen](https://codepen.io/CYini/pen/OJYPoNg) |
| 95 | emmayo | [Codepen](https://codepen.io/emmayo/pen/Jjqozpw) |
| 96 | 快樂小豬 | [Codepen](https://codepen.io/rtjowfyf-the-lessful/pen/KKLwEWW) |
| 97 | Areta | [Codepen](https://codepen.io/Areta-Gu/pen/qBGddbR) |
| 98 | wan_ju | [Codepen](https://codepen.io/Laura21/pen/RwmPrbW) |
| 99 | 小白 | [Codepen](https://codepen.io/xjbowjbr-the-builder/pen/RwmPRpm) |
| 100 | 柯柯 | [Codepen](https://codepen.io/ko13/pen/rNgVqYx) |
| 101 | Sana | [Codepen](https://codepen.io/-Chouno/pen/WNBQoXP) |
|  102  | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/PovPpKb) |
|  103  | 黛西 | [Codepen](https://codepen.io/ChiashengLin/pen/jOobLLa) |
|  104  | Toung | [Codepen](https://codepen.io/Toung/pen/qBGOLBQ) |
|  105  | Sonia | [Codepen](https://codepen.io/YUJOU/pen/MWdKrwo) |
|  106  | flyingcatman5487 | [Codepen](https://codepen.io/ysklpokt-the-looper/pen/KKLVQqG) |
|  107  | 真真瑋瑋 | [Codepen](https://codepen.io/Yujhen-Li/pen/LYoGdar)|
|  108  | jimmy.0706 | [Codepen](https://codepen.io/JimmyMao/pen/NWVNPMb)|
|  109  | discat | [Codepen](https://codepen.io/dizzysoup/pen/JjqXpVG) |
| 110 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/ExzKRXJ) |
| 111 | sunknight_002 | [Codepen](https://codepen.io/aqortatm-the-solid/pen/JjqXVze) |
| 112 | Frank Chiang | [Codepen](https://codepen.io/frankchiang/pen/NWVNQgG) |
| 113 | haojing | [Codepen](https://codepen.io/hjxu/pen/eYadMoY?editors=1100) |
| 114 | Shen | [Codepen](https://codepen.io/yan-Shen-the-decoder/pen/mdYrQVO) |
|  115  | 雪粒 | [Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/XWwmKLq) |
| 116 | Eddiesun0526 | [Codepen](https://codepen.io/Eddie0526/pen/MWdbBqL?editors=1100)
|  117  | Kai | [Codepen](https://codepen.io/imkaikai9997874/pen/xxNgxWv?editors=1100) |
|  118  | maruko1105 | [Codepen](https://codepen.io/marukox1105/pen/QWRpvgW) |
|  119  | Anais77 | [Codepen](https://codepen.io/liu-anais/pen/vYwgdLa?editors=1100) |
|  120  | Taiwanno1 | [Codepen](https://codepen.io/uhnxswdq-the-typescripter/pen/VwOzWBG?editors=1100) |
|  121  | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/rNgGRQM) |
|  122  | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/xxNPEoy) |
| 123 | ChrisLin | [CodePen](https://codepen.io/vllzfzco-the-reactor/pen/mdYXpRx) |
<!--【快速複製】    
|  num  | user | [Codepen]() |
-- >