---
# System prepended metadata

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

---

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

# 🏅 切版任務 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   |     白白     |               [Codepen](https://codepen.io/YuBai/pen/KKYjYvd)                |
|  2   |    Camila    |              [Codepen](https://codepen.io/camilalo/pen/QWPXZvg)              |
|  3   |     Meng     |            [Codepen](https://codepen.io/menglin1203/pen/XWQvvzj)             |
|  4   |    Larry     |             [Codepen](https://codepen.io/larrylinr5/pen/PogMMQX)             |
|  5   | Michelle0417 |            [Codepen](https://codepen.io/michelle0417/pen/XWQvvVN)            |
|  06  |     Aya      |             [Codepen](https://codepen.io/NoNameNote/pen/oNOKKdE)             |
|  7   |    Hailey    |       [Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/JjVggeO)       |
|  8   |   yunyouob   | [Codepen](https://codepen.io/ozkkvlsu-the-animator/pen/jORggvE?editors=1100) |
|  9   |   LGJason    |              [Codepen](https://codepen.io/j811108/pen/poBMMQg)               |
|  10  |     小趴     |              [Codepen](https://codepen.io/papa2415/pen/dyLxxxq)              |
|  11  |     tim      |       [Codepen](https://codepen.io/jskrtivy-the-animator/pen/XWQvvQg)        |
|  12  |     kawa     |              [Codepen](https://codepen.io/z83xji6/pen/ZEZggdL)               |
|  13  |    Daphne    |             [Codepen](https://codepen.io/DaphneShen/pen/LYvwwgQ)             |
|  14  |    yuling    |              [Codepen](https://codepen.io/igzdflpu/pen/MWRNNxj)              |
|  15  |    詹姆士    |        [Codepen](https://codepen.io/z111048/pen/eYaOOZE?editors=1100)        |
|  16  |    Winnie    |   [Codepen](https://codepen.io/codepen-io-winnie/pen/YzbKKwB?editors=1100)   |
|  17  |     小米     |     [Codepen](https://codepen.io/hlgudwue-the-typescripter/pen/zYQOOzW)      |
|  18  |  zuien1120   |            [Codepen](https://codepen.io/anki0072011/pen/abrooWK)             |
|  19  |     Ana      |               [Codepen](https://codepen.io/Ana-Wu/pen/ZENzzLJ)               |
|  20  |   LiLiLiLi   |      [Codepen](https://codepen.io/jungang0414/pen/MWdggem?editors=1100)      |
|  21  |   Emma   |  [Codepen](https://codepen.io/huang_L/pen/jOoNNvw)    |
|  22  | Chia Pin | [Codepen](https://codepen.io/joker-cat/pen/dyEbbrx) |
|  23  | yun4081025 | [Codepen](https://codepen.io/Yun-Chang-the-decoder/pen/OJYLLoN) |
|  24  | 阿若 | [Codepen](https://codepen.io/skar5268/pen/ZENzzNR) |
|  25  | Lauren | [Codepen](https://codepen.io/Lauren8/pen/GRaKKwp) |
|  26  | asabulu_von_f | [Codepen](https://codepen.io/asabulu/pen/ExzYxKJ) |
|  27  | Kaya | [Codepen](https://codepen.io/kayaribi/pen/PovYwwe) |
|  28  | Mars | [Codepen](https://codepen.io/Mars-the-flexboxer/pen/WNBeNEz) |
|  29  | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/gOJYOGR) |
|  30  | Yuwen | [Codepen](https://codepen.io/Yuwen-the-reactor/pen/KKLPKgR) |
|  31  | jerry_66983 | [Codepen](https://codepen.io/Barry-C/pen/WNBeNMy?editors=1100) |
|  32  | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/XWwrWqv) |
|  33  | Tanyaaaa | [Codepen](https://codepen.io/tanya77777/pen/YzbKzmQ) |
|  34  | 薛逢 | [Codepen](https://codepen.io/vogqyrrj-the-selector/pen/rNgBaVV) |
|  35  | WEIWEI | [Codepen](https://codepen.io/weiwei93/pen/GRaKgJx?editors=1100) |
|  36  |mike00712 | [Codepen](https://codepen.io/YuBai/pen/KKYjYvd?editors=1100) |
|  37  | mike_2049 | [Codepen](https://codepen.io/mike2049/pen/qBweewo?editors=1100) |
|  38  | JY | [Codepen](https://codepen.io/jylee0805/pen/wvbwBrO?editors=1100) |
|  39  | sylviabuy | [Codepen](https://codepen.io/sylviabela/pen/BaeBybg) |
| 40 | liugod3824🔥 | [Codepen](https://codepen.io/kjssvtkr-the-animator/pen/JjqPoLy)✔|
| 41  | 黛西 | [Codepen](https://codepen.io/ChiashengLin/pen/xxNKGXa) |
| 42  | tzhengliin(子恆) | [Codepen](https://codepen.io/tzhengliin/pen/bGybdxB) |
| 43  | boin | [Codepen](https://codepen.io/boinji/pen/ExzYjyQ) |
| 44 | Eden |[Codepen](https://codepen.io/iseden/pen/oNRvXEV)|
| 45  | 阿宸 | [Codepen](https://codepen.io/xnocndjt-the-sans/pen/XWwrbOP?editors=1100) |
| 46  | Yini Chen | [Codepen](https://codepen.io/CYini/pen/WNBevBO) |
| 47  | JUN_ | [Codepen](https://codepen.io/Jun-L/pen/abrovdx) |
| 48  | Aust1n | [Codepen](https://codepen.io/AustinYEH/pen/abrovZr) |
| 49  | Jiahe | [Codepen](https://codepen.io/Andywang-95/pen/PovYqOq?editors=0100) |
|  50  | LYC | [Codepen](https://codepen.io/LY-C/pen/GRaKpmr) |
|  51  | hongru-LyNn | [Codepen](https://codepen.io/LyNnYWu/pen/KKLPpOZ) |
|  52  | damon0323 | [Codepen](https://codepen.io/swk9eny2/pen/ExzYVVM) |
|  53  | Eileen | [Codepen](https://codepen.io/Eileen-io/pen/NWVKxKO) |
| 54 | Elva Su | [Codepen](https://codepen.io/evensu_/pen/Rwmbrax?editors=1100)
|  55  | Zander | [Codepen](https://codepen.io/chuangmaster/pen/ExzYjMO) |
|  56  | Annie.ch | [Codepen](https://codepen.io/Anniechang/pen/xxNKZXq) |
| 57 |james867.|[Codepen](https://codepen.io/JCT34/pen/bGybpEd)|
| 58 |FURUTO|[Codepen](https://codepen.io/oditudnw-the-flexboxer/pen/NWVKNgN)|
| 59 | s870012 |[Codepen](https://codepen.io/idzrvbnl-the-bashful/pen/bGybeNR)|
| 60 | Amy(咂摳) |[Codepen](https://codepen.io/nnxucgmc-the-builder/pen/jOoNqjG)|
| 61 | anderson666 |[Codepen](https://codepen.io/goodmanbuild/pen/oNRvLZX)|
|  62  | KUN. | [Codepen](https://codepen.io/barry91205/pen/ZENzOmN) |
|  63  | JESS | [Codepen](https://codepen.io/-8412/pen/ZENzOqZ) |
|  64  | user | [Codepen](https://codepen.io/joeychour/pen/OJYLXGv) |
|  65  | suandme | [Codepen](https://codepen.io/su-su-the-sans/pen/oNRvLRY?editors=1100) |
|  66  | Mionne | [Codepen](https://codepen.io/neohyntw/pen/oNRvzGG) |
|  67  | MY | [Codepen](https://codepen.io/ahmomoz/pen/QWRLERJ) |
|  68  | brucelee0629 | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/xxNKEMX?editors=1100) |
| 69 | Maca | [CodePen](https://codepen.io/uimaca/pen/JjqPbWB) |
| 70  | Ariel | [Codepen](https://codepen.io/ariel0510/pen/JjqPbBe?editors=1100) |
|  71  | Tough life | [Codepen](https://codepen.io/hakuei0115/pen/KKLPaVQ) |
|  72  | ninii傳教士 | [Codepen](https://codepen.io/niiniiii/pen/vYwBgmK?editors=1100) |
|  73  | Anna |[Codepen](https://codepen.io/Anna-Teng/pen/qBGWqrM)|
|  74  | Andy_12 | [Codepen](https://codepen.io/lifann/pen/bGybgjv?editors=1100) |
|  75  | wei| [Codepen](https://codepen.io/Wei-the-sasster/pen/NWVKpbo)|
|  76  | oldan | [Codepen](https://codepen.io/Enix-Chien-/pen/QWRLpKo)|
|  77  | leo.chang | [Codepen](https://codepen.io/s16777216/pen/qBGWrpj) |
|  78  | arvin | [Codepen](https://codepen.io/arvinyang1925/pen/pomzyJE) |
|  79  | jerry | [Codepen](https://codepen.io/sony791210/pen/qBGWpEa) |
|  80  | oyll | [Codepen](https://codepen.io/dizzydog-rgb/pen/rNgBJKJ) |
|  81  | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/bGybLOw) |
|  82  | macihuang |[Codepen](https://codepen.io/macy1215/pen/gOJYvQp) |
|  83  | Chingya | [Codepen](https://codepen.io/chingya1214/pen/pomzLJa) |
|  84  | 勾小勻 | [Codepen](https://codepen.io/qkvyujcc-the-encoder/pen/eYaOMGb) |
|  85  | JIAWUN  | [Codepen](https://codepen.io/wkasixgv-the-sasster/pen/eYaOJbB) |
|  86  | Chieh | [Codepen](https://codepen.io/Wei-Chieh-T/pen/NWVKMgo?editors=1100) |
|  87  | Angela_la | [Codepen](https://codepen.io/Angela-the-builder/pen/jOoNzYx?editors=1100) |
|  88  | Casey | [Codepen](https://codepen.io/Caseyyyyyyyyyyyyyy/pen/NWVKMmQ) |
|  89  | peggy | [Codepen](https://codepen.io/peggy0419/pen/jOoNKwM) |
|  89  | .zack_p | [Codepen](https://codepen.io/Designer-PH/pen/OJYLwOg) |
|  90  | Jenny_7314 | [Codepen](https://codepen.io/Jenny_000/pen/ExzYNrd?editors=1100) |
| 91 | maru3096|[Codepen](https://codepen.io/deamru/pen/jOoNQep)|
| 92 | 秀 |[Codepen](https://codepen.io/Alyssa-CHEN-the-bashful/pen/PovYXoE)|
| 93 | Linfe |[Codepen](https://codepen.io/Linfe/pen/KKLPrRB)|
| 94 | Maxine |[Codepen](https://codepen.io/Maxine0713/pen/oNRvZgB)|
| 95 | Sammy |[Codepen](https://codepen.io/fsczdlla-the-bold/pen/ExzYRZo?editors=1100)|
| 96 | kevinwen2014 | [Codepen](https://codepen.io/wenwoo/pen/rNgNxBE?editors=1100) |
|  97  | CrystalLala | [Codepen](https://codepen.io/crystallala/pen/QWRWdvq) |
|  98  | MDFK | [Codepen](https://codepen.io/aqcrrhwb/pen/MWdWbqo?editors=1100) |
|  99  | ss585801 | [Codepen](https://codepen.io/ss585801/pen/QWRLWja?editors=1100) |
| 100 | Six | [Codepen](https://codepen.io/Max-kuo/pen/QWRWMVP?editors=1100) |
| 101 | Mico | [Codepen](https://codepen.io/Mico-the-bold/pen/abrbEam) |
|102|Ran|[Codepen](https://codepen.io/Ran-Ran-the-typescripter/pen/oNRNErm)|
|  103  | Chen | [Codepen](https://codepen.io/yingchangchen/pen/wvbBBjx) |
|  104  | Aasta | [Codepen](https://codepen.io/Aasta-the-typescripter/pen/jOoErdZ?editors=1100) |
| 105 | Schnauzer | [Codepen](https://codepen.io/Cocker-Spaniel/pen/YzbPpLO) |
| 106 | discat | [Codepen](https://codepen.io/dizzysoup/pen/zYQxwaz) |
| 107 | Sana | [Codepen](https://codepen.io/-Chouno/pen/ZENYJvN) |
| 108 | yo0x0oy | [Codepen](https://codepen.io/Dayton-Hsieh/pen/LYoEjvW) |
| 109 | easonpan | [Codepen](https://codepen.io/easonpan0904/pen/abrzVdK) |
| 110 | emmayo | [Codepen](https://codepen.io/emmayo/pen/MWdYBPV) |
| 111 | 雪維 | [Codepen](https://codepen.io/Shawey/pen/ZENYMoN) |
| 112 | wan_ju | [Codepen](https://codepen.io/Laura21/pen/Jjqomzp) |
| 113 | Areta | [Codepen](https://codepen.io/Areta-Gu/pen/XWwbbWb) |
| 114 | 小白 | [Codepen](https://codepen.io/xjbowjbr-the-builder/pen/eYaNzpR) |
| 115 | 咖 | [Codepen](https://codepen.io/daru-Ga/pen/gOJpBzd) |
|  116  | 真真瑋瑋 | [Codepen](https://codepen.io/Yujhen-Li/pen/jOobVdg) |
|  117  | Toung | [Codepen](https://codepen.io/Toung/pen/zYQvMVW) |
|  118  | flyingcatman5487 | [Codepen](https://codepen.io/ysklpokt-the-looper/pen/YzbwWaO?editors=1100) |
|  119  | Sonia | [Codepen](https://codepen.io/YUJOU/pen/zYQrpOp) |
|  120  | jimmy.0706 | [Codepen](https://codepen.io/JimmyMao/pen/xxNZWbR) |
|  121  | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/dyEMReJ) |
| 122 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/oNRxyNr) |
| 123 | jami_37521 | [Codepen](https://codepen.io/jamiHexo/pen/bGypxKp) |
| 124 | sunknight_002 | [Codepen](https://codepen.io/aqortatm-the-solid/pen/wvbGZOW) |
| 125 | Frank Chiang | [codepen](https://codepen.io/frankchiang/pen/BaeKgbb) |
| 126 | Kai | [codepen](https://codepen.io/imkaikai9997874/pen/WNBxOMP?editors=1100) |
| 127 | hao jing | [codepen](https://codepen.io/hjxu/pen/ExzgNKR) |
| 128 | Shen | [Codepen](https://codepen.io/yan-Shen-the-decoder/pen/yLWaqpZ) |
|  129  | 雪粒 | [Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/dyEpBep) |
| 130 | Eddiesun0526 | [Codepen](https://codepen.io/Eddie0526/pen/bGyBjwR)
| 131 | Anais77 | [Codepen](https://codepen.io/liu-anais/pen/abrpzMW) |
|  132  | l.shua_228 | [Codepen](https://codepen.io/Shan-Hua-Lin-LIN-HUA/pen/qBGrWBj) |
|  133  | maruko1105 | [Codepen](https://codepen.io/marukox1105/pen/QWRpEmM) |
|  134  |Taiwanno1 | [Codepen](https://codepen.io/uhnxswdq-the-typescripter/pen/qBGXmwR?editors=1100) |
|  135  |毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/abrVZmd) |
| 136 | ChrisLin | [CodePen](https://codepen.io/vllzfzco-the-reactor/pen/xxNPxer) |


<!--【快速複製】    
|  num  | user | [Codepen]() |
-- >

