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

# 🏅 切版任務 Day10 - flex 運用

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


文字提供:

最新資訊
促銷活動
休閒鞋類
工作鞋類
兒童鞋類
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://codepen.io/hexschool/pen/XWxWdPp

-->

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:--------------------:|:--------------------------------------------------------------------------------:|
| 1 | 冬天#5215 | [codepen](https://codepen.io/winter_/pen/vYVRvXN) |
| 2 | Eden.C#9359 | [codepen](https://codepen.io/iseden/pen/LYgdMbP) |
| 3 | Berlin#7338 | [codepen](https://codepen.io/3qberlin/pen/rNqdoLq?editors=1100) |
| 4 | 翔.#0859 | [codepen](https://codepen.io/energy95272z/pen/VwEXqdj?editors=1100) |
| 5 | ABOOS#6276 | [codepen](https://codepen.io/guhungyin/pen/ExdEGLq) |
| 6 | Kaya#8857 | [Codepen](https://codepen.io/laron9486/pen/qBJoLae) |
| 7 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/oNaqJzv?editors=1100) |
| 8 | chichi#1534 | [Codepen](https://codepen.io/chichihuang/pen/VwEXqPL) |
| 9 | Ann Chou#0146 | [Codepen](https://codepen.io/annchou_illu/pen/YzJaByQ) |
| 10 | Kulimusoda#2785 | [Codepen](https://codepen.io/yuch3n_chen/pen/vYVRbxW?editors=1100) |
| 11 | Tami#6742 | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/qBJogEN) |
| 12 | 汪汪#4486 | [Codepen](https://codepen.io/hunwooooof/pen/mdzxvmx) |
| 13 | mo#0447 | [Codepen](https://codepen.io/mozentw/pen/BaqrMjV) |
| 14 | Uli#1946 | [Codepen](https://codepen.io/uli1313/pen/NWOYoEZ) |
| 15 | DeLi#8324 | [Codepen](https://codepen.io/delichaomoon/pen/YzJaBQE) |
| 16 | Quantum#6093 | [Codepen](https://codepen.io/Min-Hao-Hung/pen/MWPVLvW) |
| 17 | Snadra#1987 | [Codepen](https://codepen.io/mlqmhltg/pen/poxLGLo) |
| 17 | judy123#2363 | [Codepen](https://codepen.io/hsuantsong/pen/vYVRbZp?editors=1100) |
| 18 | SKey#9905 | [Codepen](https://codepen.io/Dale-Chien/pen/Baqrbag) |
| 19 | 銀光菇#1692 | [Codepen](https://codepen.io/genesynthesis/pen/yLRKZjy) |
| 20 | JimWang#6134 | [Codepen](https://codepen.io/Jim-Wang-the-selector/pen/XWxEGKa?editors=1100) |
| 21 | しあわせね#0036 | [Codepen](https://codepen.io/Front-end-engineer/pen/eYPMxzY) |
| 22 | jia yu#8896 | [Codepen](https://codepen.io/fjqxaznl-the-reactor/pen/oNaqmPo) |
| 23 | Tina02#2691 | [codepen](https://codepen.io/riifwerr-the-selector/pen/GRYxera) |
| 24 | Jacky7035#9423 | [codepen](https://codepen.io/adens123/pen/RweMvpx) |
| 25 | 史滴芬#4310 | [codepen](https://codepen.io/steven870107/pen/oNaqmLZ) |
| 26 | 黑白兔#0684 | [codepen](https://codepen.io/johnny329/pen/bGmvZgd) |
| 27 | vvay#4113 | [codepen](https://codepen.io/pellmssx-the-sasster/pen/VwEXgOd) |
| 28 | Eero#1147 | [codepen](https://codepen.io/Eero-Chiao/pen/abRYXXw) |
| 29 | Ataraxia#9977 | [codepen](https://codepen.io/ataraxia8888/pen/wvYmMqp) |
| 30 | snow#0255 | [codepen](https://codepen.io/snow21723/pen/JjmLwgG) |
| 31 | 肉個阿倫#7172 | [Codepen](https://codepen.io/i9574385/pen/MWPVxMQ) |
| 32 | Hao#2485 | [Codepen](https://codepen.io/Seanfeb16/pen/GRYxeLJ) |
| 33 | K（アギルダー）#0386 | [Codepen](https://codepen.io/klay376014/pen/dygmLqM) |
| 34 | gahwa#3562 | [Codepen](https://codepen.io/gahwa17/pen/xxyWevw) |
| 35 | Pigsue#5981 | [Codepen](https://codepen.io/weixiii/pen/bGmvyrO) |
| 36 | peihsuan #6315 | [Codepen](https://codepen.io/peihsuanlai/pen/NWOYoXJ) |
| 37 | 辣椒#1002 | [Codepen](https://codepen.io/chilichen118/pen/JjmLqYK) |
| 38 | Mindy#7886 | [Codepen](https://codepen.io/Mindyr/pen/qBJowYE) |
| 39 | townyuan#2653 | [Codepen](https://codepen.io/townyuan/pen/gOBeyJG) |
| 40 | Daisy_Li#4231 | [Codepen](https://codepen.io/lidairong-gmail-com/pen/eYPMoMx?editors=1100) |
| 41 | Judy☻ #7874 | [Codepen](https://codepen.io/hsiaohan/pen/NWOYVbE) |
| 42 | Aritan #1931 | [Codepen](https://codepen.io/Aritan/pen/mdzxZWg) |
| 43 | PayRoom#8328 | [CodePen](https://codepen.io/water38198/pen/KKGojxm) |
| 44 | 雲漢#5319 | [CODEPEN](https://codepen.io/keon981/pen/BaqrgvK) |
| 45 | Joi#4089 | [Codepen](https://codepen.io/Joi-Chen/pen/ExdEBdR) |
| 46 | Rey#1878 | [codepen](https://codepen.io/yfatgmpc-the-bold/pen/poxLGjB?editors=1100) |
| 47 | Rayo#8002 | [Codepen](https://codepen.io/loborayo/pen/dygmxwX) |
| 48 | Maxine#9061 | [Codepen](https://codepen.io/Maxine_Liao/pen/zYmjOrG) |
| 49 | wforwen#0508 | [Codepen](https://codepen.io/wenhung/pen/VwExZRX) |
| 50 | Akira#9996 | [Codepen](https://codepen.io/Akira-Chen/pen/VwExwVN) |
| 51 | YHT#1696 | [Codepen](https://codepen.io/YHT31/pen/Baqrgqj) |
| 52 | alexmav04#5048 | [Codepen](https://codepen.io/alexmav04/pen/PoyRgqz?editors=1100) |
| 53 | StellaHsu#2687 | [Codepen](https://codepen.io/stella950114/pen/VwExLKb?editors=1100) |
| 54 | Bruce-Lee#0629 | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/dygeyWg) |
| 55 | henrykgb#5749 | [Codepen](https://codepen.io/henrymorgan666/pen/gOBzpao) |
| 56 | 姜承#8204 | [Codepen](https://codepen.io/Troy0718/pen/GRYxedK) |
| 57 | jimhop#6510 | [Codepen](https://codepen.io/jimsansssss/pen/jOexPPX) |
| 58 | David0799#4415 | [Codepen](https://codepen.io/David0799/pen/vYVRvMx?editors=0100) |
| 59 | 司機叔叔#2463 | [Codepen](https://codepen.io/bigv5566/pen/PoyePrZ) |
| 60 | 吳偉雄恩#2256 | [Codepen](https://codepen.io/Bamboo1212/pen/BaqxopB?editors=1100) |
| 61 | jackwu#4437 | [Codepen](https://codepen.io/jackwu1588003/pen/GRYdoMj) |
| 62 | N0c7iluc3n7#4390 | [Codepen](https://codepen.io/huang-yu-cheng/pen/OJBZVar?editors=1100) |
| 63 | CuraLin#2648 | [Codepen](https://codepen.io/curalin/pen/QWZryMa?editors=1100) |
| 64 | LycheeKK | [Codepen](https://codepen.io/kakakala/pen/KKGRzRO) |
| 65 | 浪裡小白龍#6860 | [Codepen](https://codepen.io/Emillo/pen/bGmMpEj?editors=110) |
| 66 | jelly77#2088 | [Codepen](https://codepen.io/Ming-chiang/pen/MWPGKQP?editors=1100) |
| 67 | Jennifer Chuang#3937 | [Codepen](https://codepen.io/yujhen/pen/oNadgyj) |
| 68 | chi93#1548 | [Codepen](https://codepen.io/clarahc/pen/xxyjVwZ?editors=0100) |
| 69 | Evaxof#1266 | [Codepen](https://codepen.io/evaxof/pen/XWxEGPE?editors=1100) |
| 70 | Hanana#9025 | [Codepen](https://codepen.io/hananalin/pen/jOezdNX) |
| 71 | homer#1525 | [Codepen](https://codepen.io/Buckhorn/pen/rNqvxZR) |
| 72 | ChaosTu#9311 | [Codepen](https://codepen.io/torotu/pen/poxVEaK?editors=1100) |
| 73 | Yuu#5361 | [Codepen](https://codepen.io/alycehwy/pen/zYmjKLQ) |
| 74 | Ting.66#0912 | [Codepen](https://codepen.io/Ting66/pen/bGmMbpx) |
| 75 | 泊岸#3466 | [Codepen](https://codepen.io/qoq77416416/pen/OJBvdPv?editors=1100) |
| 76 | 阿榮#8277 | [Codepen](https://codepen.io/codeitaday/pen/YzJLrvE?editors=1100) |
| 77 | 不要迷戀媽的奶#0295 | [Codepen](https://codepen.io/kewdjbwp-the-typescripter/pen/NWOMwaq?editors=1100) |
| 78 | 陳庭#3529 | [Codepen](https://codepen.io/yuting850309/pen/RweyLZj?editors=1100) |
| 79 | andychiou#4830 | [Codepen](https://codepen.io/andychiou1113/pen/jOexxOm) |
| 80 | 呵哈#6479 | [Codepen](https://codepen.io/CHYETI/pen/ExdLRQK) |
| 81 | satarkuo#5736 | [Codepen](https://codepen.io/SatarKuo/pen/QWZrxqY?editors=1100) |
| 82 | 一瑋#8459 | [CodePen](https://codepen.io/zerosula/pen/poxVLGP) |
| 83 | 兔子#6746 | [CodePen](https://codepen.io/CarrotDetector/pen/BaqxqBm) |
| 84 | 肉魚#2149 | [CodePen](https://codepen.io/zoechen13/pen/jOexXLa) |
| 85 | yoyo#1003 | [CodePen](https://codepen.io/pen/wvYjRQq) |
| 86 | liam9930#4129 | [CodePen](https://codepen.io/jgnjfvvt-the-lessful/pen/abRGPwX?editors=1000) |
| 87 | ray0304#2070 | [Codepen](https://codepen.io/Ray0304/pen/wvYjErJ) |
| 88 | bonnieli1414#4906 | [Codepen](https://codepen.io/bonnieli1414/pen/BaqVKyw?editors=1100) |
| 89 | 魚翅#3100 | [Codepen](https://codepen.io/Fukahire/pen/oNayzJN) |
| 90 | alan0305#2423 | [Codepen](https://codepen.io/alan0305/pen/NWOzdpQ?editors=1100) |
| 91 | Zhong#8917 | [Codepen](https://codepen.io/klfjrlod-the-sasster/pen/MWPXppr) |
| 92 | Döng#2328 | [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/ZEqRyap?editors=1100) |
| 93 | 張金#7225 | [Codepen](https://codepen.io/changxchieh/pen/rNqKmbO?editors=1100) |
| 94 | Yiching#0738 | [Codepen](https://codepen.io/haruko_/pen/RweJGer) |
| 95 | PoWei#8484 | [Codepen](https://codepen.io/winter_/pen/vYVRvXN) |
| 96 | Xing#6281 | [Codepen](https://codepen.io/ting-ting-the-bold/pen/poxKxPQ?editors=1100) |
| 97 | moins13#3346 | [Codepen](https://codepen.io/kyechen13/pen/JjmZwGB?editors=1100) |
| 98 | 長方形#9612 | [Codepen](https://codepen.io/imjjw/pen/abRKPGQ) |
| 99 | duck#3310 | [Codepen](https://codepen.io/papy0715/pen/XWxYoyx?editors=1100) |
| 100 | MitA#7407 | [Codepen](https://codepen.io/qaz15996398/pen/WNaymde) |
| 101 | andrew0404#4576 | [Codepen](https://codepen.io/Loonng/pen/BaqVvMp?editors=1100) |
| 102 | 歐陽龍龍#1061 | [Codepen](https://codepen.io/dizzydog-rgb/pen/GRYGLaq?editors=1100) |
| 103 | HsuanTang#1349 | [Codepen](https://codepen.io/HsuanTang/pen/WNayBVP) |
| 104 | 小華#3204 | [Codepen](https://codepen.io/franfranfran/pen/bGmKOjq?editors=1100) |
| 105 | Janet#5784 | [Codepen](https://codepen.io/janetlinnn/pen/oNayKvP) |
| 106 | 冷曄#8484 | [Codepen](https://codepen.io/HgHale/pen/JjmBdBG?editors=1100) |
| 107 | charlottelee849#0366 | [Codepen](https://codepen.io/char849/pen/bGmjpqa) |
| 108 | 變羊魔法#6372 | [Codepen](https://codepen.io/cssf998811/pen/gOBjLRW) |
| 109 | jun777#2468 | [Codepen](https://codepen.io/js18151102/pen/JjmBbdQ?editors=1100) |
| 110 | JiaYin#1196 | [Codepen](https://codepen.io/chen19970221/pen/poxZejN) |
| 111 | Lainie#1931 | [Codepen](https://codepen.io/Lainie88/pen/QWZBObY?editors=1100) |
| 112 | Liang#6047 | [Codepen](https://codepen.io/aaagoodaa/pen/eYPjPyx) |
| 113 | 鉦勝#8333 | [Codepen](https://codepen.io/atckmax823/pen/OJBwqXE?editors=1100) |
| 114 | penny#6214 | [Codepen](https://codepen.io/penny8989/pen/XWxPKNJ) |
| 115 | 鄭舜仁#6606 | [Codepen](https://codepen.io/randomno/pen/yLRxJpB) |
| 116 | 依依#6306 | [Codepen](https://codepen.io/Rita-Yang/pen/KKGxNRe) |
| 117 | Yvonne#2721 | [Codepen](https://codepen.io/Evonne/pen/abRaBYg?editors=1100) |
| 118 | Pei#5161 | [Codepen](https://codepen.io/Pei0303/pen/yLRxjLY) |
| 119 | 又竹#7302 | [Codepen](https://codepen.io/YO_ZU/pen/bGmxROZ) |
| 120 | 貢波波夫#3056 | [Codepen](https://codepen.io/mxgrfgcr-the-bashful/pen/BaqOeYW) |
| 121 | yen#5757 | [Codepen](https://codepen.io/TZU-HUANG-YEN/pen/LYgJoWo?editors=1100) |
| 122 | wendyli#2155 | [Codepen](https://codepen.io/rockayumitw/pen/eYPPpRq?editors=1100) |
| 123 | 狸貓#5863 | [Codepen](https://codepen.io/tanuki320/pen/NWOOGxM) |
| 124 | +7#8492 | [Codepen](https://codepen.io/tojibom/pen/xxyJBWq) |
| 125 | betty#0693 | [Codepen](https://codepen.io/betty-hu/pen/jOeeavd) |
| 126 | ssshane#0673 | [Codepen](https://codepen.io/sam6091260/pen/zYmmprK) |
| 127 | FiReBrO#0557 | [Codepen](https://codepen.io/firebro42/pen/poxxVVy) |
| 128 | Tim123#8361 | [Codepen](https://codepen.io/Wangtim4/pen/rNqQeeG) |
| 129 | JasonChang#7847 | [Codepen](https://codepen.io/jsonChangJava/pen/ZEqmjNd) |
| 130 | Elma#4317 | [Codepan](https://codepen.io/4317/pen/gOBQQEG) |
| 131 | Sonia Wu#7154 | [Codepan](https://codepen.io/YUJOU/pen/XWxyORz?editors=1100) |
| 132 | 提姆#9581 | [Codepan](https://codepen.io/timouo/pen/BaqxjGm) |
| 133 | alll6z#9204 | [Codepan](https://codepen.io/A6Z/pen/abRPoNV) |
| 134 | 羽毛#5463 | [Codepan](https://codepen.io/KYuFeather/pen/ZEqVYob) |
| 135 | JhouHank#8132 | [Codepan](https://codepen.io/JhouHank/pen/MWPZpQW) |
| 136 | NathanJames#8120 | [Codepan](https://codepen.io/ufo060204/pen/qBJLrJj) |
| 137 | Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/LYgJwwX) |
| 138 | Jaredlee#5887 | [CodePen](https://codepen.io/jared-lee/pen/PoydEVw?editors=1100) |
| 138 | boki#3717 | [CodePen](https://codepen.io/boki-wang/pen/PoyXeyd) |
| 139 | 喬喬#2824 | [CodePen](https://codepen.io/joanne-wei/pen/ZEqVdyo) |
| 140 | weiting#3489 | [CodePen](https://codepen.io/weiting14/pen/xxyMPJB?editors=1100) |
| 141 | Meiru#6310 | [CodePen](https://codepen.io/mei00/pen/Exdrawj) |
| 142 | 小魚#8614 | [CodePen](https://codepen.io/gizelliang/pen/KKGJrBy) |
| 143 | 君Jyun#0147 | [codepen](https://hackmd.io/CWjrJR5ORWilPPoVXQ2IIg?both) |
| 144 | Syrena#3897 | [Codepen](https://codepen.io/Syrena-Chung/pen/QWZoGmL) |
| 145 | lishuan#3698 | [Codepen](https://codepen.io/lishuan/pen/gOBELGB?editors=1100) |
| 146 | Joanne Hu#0010 | [Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/KKGEEya?editors=1100) |
| 147 | FanJJ#8061 | [Codepen](https://codepen.io/yfchenn/pen/KKGYvEx) |
| 148 | 杰_jie#9088 | [Codepen](https://codepen.io/hmj8805/pen/OJBYVro) |
| 149 | 東東#5015 | [Codepen](https://codepen.io/wearymask/pen/yLRrBRN) |
| 150 | 柚子#3958 | [Codepen](https://codepen.io/as6625998/pen/dygEJKb) |
| 151 | Celia#1715 | [Codepen](https://codepen.io/drdrvpgf-the-bashful/pen/mdzYxLa) |
| 152 | 路人ADCB#9851 | [Codepen](https://codepen.io/markyourpage/pen/XWxwZBJ) |
| 153 | 江江#1947 | [Codepen](https://codepen.io/singing228/pen/JjmqeRJ) |
| 154 | Jojonz_Kao#7998 | [Codepen](https://codepen.io/ewnrzxpr-the-builder/pen/YzJoWyE?editors=0100) |
| 155 | 初心#9021 | [Codepen](https://codepen.io/Sylviax/pen/PoxoOYG?editors=1100) |
| 156 | 慢慢來#4035 | [Codepen](https://codepen.io/kikiyang/pen/oNQgqoN?editors=1100) |
| 157 | ztion#8403 | [Codepen](https://codepen.io/ztion/pen/poQvGOR?editors=1100) |
| 158 | pss940909#8650 | [Codepen](https://codepen.io/pss940909/pen/dyQoVqq) |
|159|cmlb0212|[Codepen](https://codepen.io/Chungmin0212/pen/OJayGzj?editors=1100)|