---
# System prepended metadata

title: "\U0001F3C5 切版任務 Day9 - flex 練習 II"
tags: [軟體工程師體驗營 - 2023]

---

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

# 🏅 切版任務 Day9 - flex 練習 II
## 問題 
運用 flex 將圖形呈現如下圖：

![](https://i.imgur.com/ELq2KrB.png)
> 方形色塊資訊：
> - `400px * 400px` `#a73836`
> - `110px * 100px` `#ffffff`


## 回報流程

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

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

<!-- 

解答：
https://codepen.io/hexschool/pen/dyqEGoZ

-->


回報區
---

| 報數 |     Discord 名字     |                               Codepen／其他回饋                               |
|:----:|:--------------------:|:-----------------------------------------------------------------------------:|
|  1   |     Eden.C#9359      |               [codepen](https://codepen.io/iseden/pen/jOezbja)                |
|  2   |      冬天#5215       |               [codepen](https://codepen.io/winter_/pen/vYVRNwO)               |
|  3   |      SKey#9905       |             [codepen](https://codepen.io/Dale-Chien/pen/LYgdGEP)              |
|  4   |       翔.#0859       |      [codepen](https://codepen.io/energy95272z/pen/ExdEPxM?editors=1100)      |
|  5   |     黑白兔#0684      |              [codepen](https://codepen.io/johnny329/pen/MWPVaNX)              |
|  6   |    Ataraxia#9977     |            [codepen](https://codepen.io/ataraxia8888/pen/abRwXvX)             |
|  7   |     Rochel#4754      |     [codepen](https://codepen.io/rochelwang1205/pen/YzJaybP?editors=1100)     |
|  8   |     Berlin#7338      |        [codepen](https://codepen.io/3qberlin/pen/WNazrNZ?editors=1100)        |
|  9   |     銀光菇#1692      |            [codepen](https://codepen.io/genesynthesis/pen/abRYdZg)            |
|  10  |   Kulimusoda#2785    |      [codepen](https://codepen.io/yuch3n_chen/pen/wvYmMor?editors=1100)       |
|  11  |    Ann Chou#0146     |            [codepen](https://codepen.io/annchou_illu/pen/yLRKejZ)             |
|  12  |    peihsuan #6315    |             [codepen](https://codepen.io/peihsuanlai/pen/NWOYxzz)             |
|  13  |      雲漢#5319       |               [codepen](https://codepen.io/keon981/pen/VwEXaLz)               |
|  14  |      汪汪#4486       |             [Codepen](https://codepen.io/hunwooooof/pen/JjmLGVK)              |
|  15  |    satarkuo#5736     |        [Codepen](https://codepen.io/SatarKuo/pen/vYVRGEW?editors=1100)        |
|  16  |     judy123#2363     |             [Codepen](https://codepen.io/hsuantsong/pen/oNaqxbw)              |
|  17  |       DyH#0526       |              [Codepen](https://codepen.io/dorihung/pen/BaqrKKq)               |
|  18  |     Snadra#1987      |              [Codepen](https://codepen.io/mlqmhltg/pen/LYgdNEW)               |
|  19  |     Judy ☻ #7874     |        [Codepen](https://codepen.io/hsiaohan/pen/yLRKONm?editors=1100)        |
|  20  |      DeLi#8324       |            [Codepen](https://codepen.io/delichaomoon/pen/RweMarQ)             |
|  21  |      vvay#4113       |        [Codepen](https://codepen.io/pellmssx-the-sasster/pen/ZEqxWQY)         |
|  22  |      依依#6306       |       [Codepen](https://codepen.io/Rita-Yang/pen/XWxEdjd?editors=1100)        |
|  23  |       Hao#2485       |              [codepen](https://codepen.io/Seanfeb16/pen/qBJoZXX)              |
|  24  |     Tina02#2691      |        [codepen](https://codepen.io/riifwerr-the-selector/pen/oNaqxqp)        |
|  25  |   andrew0404#4576    |               [codepen](https://codepen.io/Loonng/pen/XWxZLBB)                |
|  26  |    Jacky7035#9423    |              [codepen](https://codepen.io/adens123/pen/yLRKOpN)               |
|  27  |      Eero#1147       |             [codepen](https://codepen.io/Eero-Chiao/pen/abRYNGw)              |
|  28  |     Quantum#6093     |            [Codepen](https://codepen.io/Min-Hao-Hung/pen/BaqrKWv)             |
|  29  |     CuraLin#2648     |        [Codepen](https://codepen.io/curalin/pen/poxLyGy?editors=1100)         |
|  30  |     chichi#1534      |             [Codepen](https://codepen.io/chichihuang/pen/gOBeraz)             |
|  31  |    Daisy_li#4231     |         [Codepen](https://codepen.io/lidairong-gmail-com/pen/PoyRzPM)         |
|  32  |     jia yu#8896      |        [Codepen](https://codepen.io/fjqxaznl-the-reactor/pen/gOBeMGb)         |
|  33  |       Uli#1946       |               [Codepen](https://codepen.io/uli1313/pen/LYgdZjM)               |
|  33  |   clairechen#3498    |             [Codepen](https://codepen.io/yi-wen-chen/pen/QWZmEqd)             |
|  34  |     JimWang#6134     |        [Codepen](https://codepen.io/Jim-Wang-the-selector/pen/GRYxqyR)        |
|  35  |     PayRoom#8328     |             [CodePen](https://codepen.io/water38198/pen/KKGoMLZ)              |
|  36  |      dukc#3310       |              [CodePen](https://codepen.io/papy0715/pen/BaqrzYK)               |
|  37  |      一瑋#8459       |              [CodePen](https://codepen.io/zerosula/pen/mdzxEaJ)               |
|  38  |       cbs#9007       |               [Codepen](https://codepen.io/wasdjk/pen/LYgdZvK)                |
|  39  |      辣椒#1002       |            [Codepen](https://codepen.io/chilichen118/pen/WNazxqE)             |
|  40  |   しあわせね#0036    |         [CodePen](https://codepen.io/Front-end-engineer/pen/oNaqzbN)          |
|  41  | K（アギルダー）#0386 |             [CodePen](https://codepen.io/klay376014/pen/WNazGwd)              |
|  42  |      喬喬#2824       |             [CodePen](https://codepen.io/joanne-wei/pen/jOezrPr)              |
|  43  |      Tami#6742       |          [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/QWZmKKQ)          |
|  44  |      Lychee KK       |              [Codepen](https://codepen.io/kakakala/pen/OJBvRJW)               |
|  45  |      gahwa#3562      |               [Codepen](https://codepen.io/gahwa17/pen/gOBewzx)               |
|  46  |     史滴芬#4310      |            [Codepen](https://codepen.io/steven870107/pen/KKGogEJ)             |
|  47  |      ABOOS#6276      |              [Codepen](https://codepen.io/guhungyin/pen/eYPMBOY)              |
|  48  |    肉個阿倫#7172     |              [Codepen](https://codepen.io/i9574385/pen/XWxENJb)               |
|  49  |      陳庭#3529       |      [Codepen](https://codepen.io/yuting850309/pen/poxLEyK?editors=1100)      |
|  50  |    Alan0305#2423     |              [Codepen](https://codepen.io/alan0305/pen/eYPMdGX)               |
|  50  |     HsienLu#8316     |               [Codepen](https://codepen.io/Hsienlu/pen/dygmObW)               |
|  51  |      Kaya#8857       |              [Codepen](https://codepen.io/laron9486/pen/JjmLbXE)              |
|  52  |       Rey#1878       |          [codepen](https://codepen.io/yfatgmpc-the-bold/pen/VwEXKeL)          |
|  53  |     君Jyun#0147      |             [codepen](https://codepen.io/JyunCodepen/pen/poxLRmp)             |
|  54  |     wendyli#2155     |      [codepen](https://codepen.io/rockayumitw/pen/Baqrpgp?editors=1100)       |
|  55  |      penny#6214      |       [codepen](https://codepen.io/penny8989/pen/oNaqBPO?editors=1100)        |
|  56  |      snow#0255       |              [codepen](https://codepen.io/snow21723/pen/MWPVJXO)              |
|  57  |    Judy Wei#6103     |              [Codepen](https://codepen.io/Judy0718/pen/KKGoWMR)               |
|  58  |      MitA#7407       |             [Codepen](https://codepen.io/qaz15996398/pen/LYgdyxL)             |
|  59  |     Aritan#1931      |               [Codepen](https://codepen.io/Aritan/pen/vYVRmeR)                |
|  60  |    HsuanTang#1349    |              [Codepen](https://codepen.io/HsuanTang/pen/bGmvWqz)              |
|  61  |      Mindy#7886      |               [Codepen](https://codepen.io/Mindyr/pen/eYPMZxg)                |
|  62  |      姜承#8204       |              [Codepen](https://codepen.io/Troy0718/pen/yLRKXjz)               |
|  63  |    Bruce-Lee#0629    |        [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/qBJojww)         |
|  64  | Jennifer Chuang#3937 |               [Codepen](https://codepen.io/yujhen/pen/RweMgmP)                |
|  65  | 不要迷戀媽的奶 #0295 |      [Codepen](https://codepen.io/kewdjbwp-the-typescripter/pen/ExdEvwB)      |
|  66  |     Yui1024#8275     |             [Codepen](https://codepen.io/Yuiyuichou/pen/zYmWdpV)              |
|  67  |      Yuki#9465       |             [Codepen](https://codepen.io/yukilin549/pen/oNaqedx)              |
|  68  |    andychiou#4830    |            [Codepen](https://codepen.io/andychiou1113/pen/mdzxMKm)            |
|  69  |     jimhop#6510      |             [Codepen](https://codepen.io/jimsansssss/pen/PoyRKeJ)             |
|  70  |    司機叔叔#2463     |        [Codepen](https://codepen.io/bigv5566/pen/xxyWLeZ?editors=1100)        |
|  71  |     jelly77#2088     |             [Codepen](https://codepen.io/Ming-chiang/pen/dygmzQp)             |
|  72  |     Evaxof#1266      |               [Codepen](https://codepen.io/evaxof/pen/mdzxMpW)                |
|  73  |    吳偉雄恩#2256     |       [Codepen](https://codepen.io/Bamboo1212/pen/vYVReNe?editors=1100)       |
|  74  |   浪裡小白龍#6860    |         [Codepen](https://codepen.io/Emillo/pen/QWZmMoZ?editors=1100)         |
|  75  |     wiimax#4564      |              [Codepen](https://codepen.io/willismax/pen/eYPMGdN)              |
|  76  |      homer#1525      |              [Codepen](https://codepen.io/Buckhorn/pen/VwEXzXj)               |
|  77  |     Pigsue#5981      |               [Codepen](https://codepen.io/weixiii/pen/poxLWMy)               |
|  78  |      Akira#9996      |             [Codepen](https://codepen.io/Akira-Chen/pen/ZEqxXVp)              |
|  79  |   N0c7iluc3n7#4390   |           [Codepen](https://codepen.io/huang-yu-cheng/pen/GRYxOWV)            |
|  80  |       ray#2070       |               [Codepen](https://codepen.io/Ray0304/pen/bGmvqaL)               |
|  81  |    David0799#4415    |       [Codepen](https://codepen.io/David0799/pen/JjmLOya?editors=0100)        |
|  82  |      Janet#5784      |             [Codepen](https://codepen.io/janetlinnn/pen/RweMjON)              |
|  83  |      肉魚#2149       |              [Codepen](https://codepen.io/zoechen13/pen/eYPMeqj)              |
|  84  |      Welly#3964      |               [Codepen](https://codepen.io/welly09/pen/LYgdevZ)               |
|  85  |     jackwu#4437      |            [Codepen](https://codepen.io/jackwu1588003/pen/vYVRdBJ)            |
|  86  |     ChaosTu#9311     |         [Codepen](https://codepen.io/torotu/pen/mdzxmxG?editors=1100)         |
|  87  |     Maxine#9061      |             [Codepen](https://codepen.io/Maxine_Liao/pen/poxLpbV)             |
|  88  |      Rayo#8002       |              [Codepen](https://codepen.io/loborayo/pen/NWOYXqv)               |
|  89  |       Yuu#5361       |              [Codepen](https://codepen.io/alycehwy/pen/jOezzGV)               |
|  90  |      泊岸#3466       |      [Codepen](https://codepen.io/qoq77416416/pen/YzJavXQ?editors=1100)       |
|  91  |       mo#0447        |               [Codepen](https://codepen.io/mozentw/pen/ExdErYj)               |
|  92  |  bonnieli1414#4906   |      [Codepen](https://codepen.io/bonnieli1414/pen/MWPVvEz?editors=1100)      |
|  93  |    alexmav04#5048    |              [Codepen](https://codepen.io/alexmav04/pen/GRYxeJe)              |
|  94  |      yoyo#1003       |                   [Codepen](https://codepen.io/pen/QWZmoLw)                   |
|  95  |     Ting.66#0912     |         [Codepen](https://codepen.io/Ting66/pen/JjmLKdv?editors=1100)         |
|  96  |      大頭#1695       |        [Codepen](https://codepen.io/conlyvrg-the-reactor/pen/yLRKWoB)         |
|  97  |      鉦勝#8333       |             [Codepen](https://codepen.io/atckmax823/pen/oNaqRyG)              |
|  98  |      PoWei#8484      |          [Codepen](https://codepen.io/harrison-wei-lai/pen/Baqrgag)           |
|  99  |    townyuan#2653     |              [Codepen](https://codepen.io/townyuan/pen/OJBveQP)               |
| 100  |      Neal#7428       |           [Codepen](https://codepen.io/thinkingsmonkey/pen/Baqrgmy)           |
| 101  |    liam9930#4129     |  [Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/LYgdwXp?editors=1100)  |
| 102  |     Yvonne#2721      |               [Codepen](https://codepen.io/Evonne/pen/dygmxqM)                |
| 103  |      呵哈#6479       |               [Codepen](https://codepen.io/CHYETI/pen/yLRjBPB)                |
| 104  |     Evelyne#7323     |              [Codepen](https://codepen.io/Evelynep/pen/YzJLKWQ)               |
| 105  |    henrykgb#5749     |           [Codepen](https://codepen.io/henrymorgan666/pen/OJBZPQg)            |
| 106  |       YHT#1696       |                [Codepen](https://codepen.io/YHT31/pen/ExdENaP)                |
| 107  |     jun777#2468      |             [Codepen](https://codepen.io/js18151102/pen/qBJYdGV)              |
| 108  |       LYC#5516       |               [Codepen](https://codepen.io/chi-yen/pen/RweyWeX)               |
| 109  |      兔子#6746       |           [Codepen](https://codepen.io/CarrotDetector/pen/NWOYado)            |
| 110  |    歐陽龍龍#1061     |            [Codepen](https://codepen.io/dizzydog-rgb/pen/bGmMpPP)             |
| 111  |     Hanana#9025      |              [Codepen](https://codepen.io/hananalin/pen/jOezWMx)              |
| 112  |      張金#7225       |      [Codepen](https://codepen.io/changxchieh/pen/abRGzJx?editors=1100)       |
| 113  |      狸貓#5863       |              [Codepen](https://codepen.io/tanuki320/pen/qBJYagd)              |
| 114  |      LeeRu#1771      |             [Codepen](https://codepen.io/IMGameKing/pen/LYgmjop)              |
| 115  |      阿榮#8277       |       [Codepen](https://codepen.io/codeitaday/pen/QWZrqgY?editors=1100)       |
| 116  |      Celia#1715      |        [Codepen](https://codepen.io/drdrvpgf-the-bashful/pen/XWxqZeb)         |
| 117  |     moins13#3346     |              [Codepen](https://codepen.io/kyechen13/pen/bGmMLOZ)              |
| 118  |      冷曄#9378       |               [Codepen](https://codepen.io/HgHale/pen/gOBzjGJ)                |
| 119  |      Zhong#8917      |        [Codepen](https://codepen.io/klfjrlod-the-sasster/pen/qBJYgGj)         |
| 120  |      Döng#2328       |        [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/dygKbXp)         |
| 121  |     Yiching#0738     |        [Codepen](https://codepen.io/haruko_/pen/NWOzrPm?editors=1100)         |
| 122  |      魚翅#3100       |              [Codepen](https://codepen.io/Fukahire/pen/RweJGBr)               |
| 123  |     Lainie#1931      |              [Codepen](https://codepen.io/Lainie88/pen/BaqVWrQ)               |
| 124  |      Xing#6281       |         [Codepen](https://codepen.io/ting-ting-the-bold/pen/JjmZmbo)          |
| 125  |      小華#3204       |      [Codepen](https://codepen.io/franfranfran/pen/MWPXyRW?editors=1100)      |
| 126  |     長方形#9612      |                [Codepen](https://codepen.io/imjjw/pen/jOeKXBB)                |
| 127  |      Jared#5887      |       [Codepen](https://codepen.io/jared-lee/pen/WNaJayP?editors=1100)        |
| 128  | charlottelee849#0366 |               [Codepen](https://codepen.io/char849/pen/bGmjEJW)               |
| 129  |     mike519#4399     |              [Codepen](https://codepen.io/mike519tw/pen/ExdpyoW)              |
| 130  |     JiaYin#1196      |            [Codepen](https://codepen.io/chen19970221/pen/jOeprpE)             |
| 131  |    Jarvis莊#8679     |             [Codepen](https://codepen.io/jason-hsuan/pen/XWxBjGP)             |
| 132  |    變羊魔法#6372     |             [Codepen](https://codepen.io/cssf998811/pen/VwEBKOw)              |
| 133  |     鄭舜仁#6606      |              [Codepen](https://codepen.io/randomno/pen/VwEGaRK)               |
| 134  |      又竹#7302       |                [Codepen](https://codepen.io/YO_ZU/pen/poxOPgd)                |
| 135  |    貢波波夫#3056     |        [Codepen](https://codepen.io/mxgrfgcr-the-bashful/pen/MWPqzYL)         |
| 136  |     Jenny真#7532     |             [CodePen](https://codepen.io/wei-chen-wu/pen/NWOLVRd)             |
| 137  |     ssshane#0673     |             [CodePen](https://codepen.io/sam6091260/pen/mdzGZLp)              |
| 138  |     SASIMI#5099      |             [codepen](https://codepen.io/sashimi1327/pen/vYVVEjv)             |
| 139  |      betty#0693      |        [codepen](https://codepen.io/betty-hu/pen/qBJJVYN?editors=1100)        |
| 140  |     FiReBrO#0557     |              [Codepen](https://codepen.io/firebro42/pen/QWZZrqW)              |
| 141  |      紫紫#7337       |              [Codepen](https://codepen.io/picahsin/pen/YzJJYMd)               |
| 142  |     Tim123#8361      |              [Codepen](https://codepen.io/Wangtim4/pen/jOeQWeP)               |
| 143  |      柚子#3958       |              [Codepen](https://codepen.io/as6625998/pen/dygQpmd)              |
| 144  |   JasonChang#7847    |            [Codepen](https://codepen.io/jsonChangJava/pen/abRQKVK)            |
| 145  |      Elma#4317       |                [codepan](https://codepen.io/4317/pen/QWZJJrx)                 |
| 146  |      提姆#9581       |               [Codepen](https://codepen.io/timouo/pen/MWPGKqz)                |
| 147  |    Sonia Wu#7154     |         [Codepen](https://codepen.io/YUJOU/pen/vYVQbYV?editors=1100)          |
| 148  |      羽毛#5463       |             [Codepen](https://codepen.io/KYuFeather/pen/wvYQOyP)              |
| 149  |     alll6z#9204      |                 [Codepen](https://codepen.io/A6Z/pen/yLRQmZY)                 |
| 150  |     weiting#3489     |       [Codepen](https://codepen.io/weiting14/pen/poxqJmW?editors=1100)        |
| 151  |   NathanJames#8120   |              [Codepen](https://codepen.io/ufo060204/pen/KKGbzxW)              |
| 152  |    JhouHank#8132     |              [Codepen](https://codepen.io/JhouHank/pen/GRYPrgp)               |
| 153  |      小明#4408       |        [Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/GRYPEgJ)         |
| 154  |      Meiru#6310      |                [Codepen](https://codepen.io/mei00/pen/xxymXNy)                |
| 155  |      五福#1395       |      [Codepen](https://codepen.io/abcxyz23572/pen/wvYRLWz?editors=1100)       |
| 156  |      小魚#8614       |             [Codepen](https://codepen.io/gizelliang/pen/gOBqdjo)              |
| 157  |     Syrena#3897      |            [Codepen](https://codepen.io/Syrena-Chung/pen/MWPxjeP)             |
| 158  |     lishuan#3698     |               [Codepen](https://codepen.io/lishuan/pen/xxyBRVR)               |
| 159  |      江江#1947       |             [Codepen](https://codepen.io/singing228/pen/eYPXGKz)              |
| 160  |    Joanne Hu#0010    | [Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/rNqRYZv?editors=1100) |
| 161  |      FanJJ#8061      |        [Codepen](https://codepen.io/yfchenn/pen/JjmVNoG?editors=1100)         |
| 162  |     杰_jie#9088      |               [Codepen](https://codepen.io/hmj8805/pen/mdzYbQx)               |
| 163  |      東東#5015       |              [Codepen](https://codepen.io/wearymask/pen/poxBzaz)              |
| 164  |    路人ADCB#9851     |            [Codepen](https://codepen.io/markyourpage/pen/NWOVXVw)             |
| 165  |      初心#9021       |        [Codepen](https://codepen.io/Sylviax/pen/NWEWxEW?editors=1100)         |
| 166  |   tzuyun1019#0135    |             [Codepen](https://codepen.io/TzuYun1019/pen/YzRPWPK)              |
| 167  |     慢慢來#4035      |              [Codepen](https://codepen.io/kikiyang/pen/MWzYaBZ)               |
| 168  |      ztion#8403      |         [Codepen](https://codepen.io/ztion/pen/bGQNzrG?editors=1100)          |
|    169  |      pss940909#8650                |                                 [Codepen](https://codepen.io/pss940909/pen/QWJbMVY)                                              |
| 170|cmlb0212|[codepen](https://codepen.io/Chungmin0212/pen/oNQjOBN)|