---
# System prepended metadata

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

---

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

# 🏅 切版任務 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)

<!-- 

解答：
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)|