---
# System prepended metadata

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

---

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

# 🏅 切版任務 Day8 - flex 練習 I
## 問題 

在 Codepen 中使用 flex 技巧將兩個正方形（各別是 300px * 300px 與 100px * 100px）呈現如下：
> 只需要將內層方形色塊水平垂直置中於外層色塊中，
圖面上的文字為補助顏色與方形尺寸資訊，不需要將文字放進去喔
> 
![](https://i.imgur.com/DTVJxaF.png)


## 回報流程

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

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

<!-- 

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

-->


回報區
---

| 報數 | Discord 名字  |  Codepen／其他回饋                                                         |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1 | 冬天#5215 | [Codepen](https://codepen.io/winter_/pen/rNqJJdy) |
| 2 | Berlin#7338 | [Codepen](https://codepen.io/3qberlin/pen/RweQQQe) |
| 3 | 不要迷戀媽的奶#0295 | [Codepen](https://codepen.io/kewdjbwp-the-typescripter/pen/oNaEEqd?editors=1100) |
| 4 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/dygddeK?editors=1100) |
| 5 | Ann Chou#0146 | [Codepen](https://codepen.io/annchou_illu/pen/rNqJJKy) |
| 6 | 銀光菇#1692 | [Codepen](https://codepen.io/genesynthesis/pen/xxyYYap) |
| 7 | charlottelee849#0366 | [Codepen](https://codepen.io/char849/pen/JjmppBp) |
| 8 | Joi#4089 | [Codepen](https://codepen.io/Joi-Chen/pen/zYmRRbP)
| 9 | Kulimusoda#2785 | [Codepen](https://codepen.io/yuch3n_chen/pen/poxaamN?editors=1100) |
| 10 | Tami#6742 | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/xxyYYeW) |
| 11 | 翔.#0859 | [Codepen](https://codepen.io/energy95272z/pen/GRYQQbb?editors=1100) |
| 12 | ABOOS#6276|[Codepen](https://codepen.io/guhungyin/pen/LYgQdEg)|
| 13 | duck#3310|[Codepen](https://codepen.io/papy0715/pen/vYVdRGw)|
| 14 | satarkuo#5736|[Codepen](https://codepen.io/SatarKuo/pen/dygdmXr)|
| 15 | DeLi#8324|[Codepen](https://codepen.io/delichaomoon/pen/gOBveGa)|
| 16 | 汪汪#4486|[Codepen](https://codepen.io/hunwooooof/pen/WNaMzdj)|
| 17 | vvay#4113 |[Codepen](https://codepen.io/pellmssx-the-sasster/pen/poxaLLd)|
| 18 |townyuan#2653|[Codepen](https://codepen.io/townyuan/pen/ZEqrxxo)|
| 19 |Jacky7035#9423|[Codepen](https://codepen.io/adens123/pen/mdzXxKe)|
| 20 |CuraLin#2648|[Codepen](https://codepen.io/curalin/pen/abRqYYP?editors=1100)|
|21|雲漢#5319|[Codepen](https://codepen.io/keon981/pen/poxaLKp)|
|22|Celia#1715|[Codepen](https://codepen.io/drdrvpgf-the-bashful/pen/rNqJdrZ)|
|23|Eero#1147|[Codepen](https://codepen.io/Eero-Chiao/pen/rNqJdZZ)|
|24|辣椒#1002|[Codepen](https://codepen.io/chilichen118/pen/VwEQXqY)|
|25|Snadra#1987|[Codepen](https://codepen.io/mlqmhltg/pen/LYgQdJK)|
| 26 |Lychee KK|[Codepen](https://codepen.io/kakakala/pen/jOeZzXY)|
| 27 |judy123#2363|[Codepen](https://codepen.io/hsuantsong/pen/wvYymZe)|
| 28 |しあわせね#0336|[Codepen](https://codepen.io/Front-end-engineer/pen/GRYQxLj)|
| 29 |jia yu#8896|[Codepen](https://codepen.io/fjqxaznl-the-reactor/pen/JjmpLgg)|
| 30 |andychiou#4830|[Codepen](https://codepen.io/andychiou1113/pen/BaqYxod)|
| 31 |史滴芬#4310|[Codepen](https://codepen.io/steven870107/pen/abRqGzg)|
| 32 |K（アギルダー）#0386|[Codepen](https://codepen.io/klay376014/pen/JjmpvRo)|
| 33 |Quantum#6093|[Codepen](https://codepen.io/Min-Hao-Hung/pen/xxyYjqb)|
| 34 |小華#4203|[Codepen](https://codepen.io/franfranfran/pen/WNaMJRJ?editors=1100)|
| 35  | Tina02#2691 | [codepen](https://codepen.io/riifwerr-the-selector/pen/XWxZqgv) |
| 36  | MitA#7407 | [codepen](https://codepen.io/qaz15996398/pen/wvYyjrm) |
| 37  | daisy_li#4231 | [codepen](https://codepen.io/lidairong-gmail-com/pen/LYgQmrR) |
| 38  | Ting.66#0912 | [codepen](https://codepen.io/Ting66/pen/qBJxYYN?editors=1100) 
| 39  | JimWang#6134 | [codepen](https://codepen.io/Jim-Wang-the-selector/pen/BaqYxPx) |
| 40  | alexmav04#5048 | [codepen](https://codepen.io/alexmav04/pen/JjmpvzR) |
| 41  | 鉦勝#8333 | [codepen](https://codepen.io/atckmax823/pen/rNqJvXO) |
 42 |大頭#1695 | [codepen](https://codepen.io/conlyvrg-the-reactor/pen/LYgQmwy) |
 | 43  | clairechen#3498      | [codepen]( https://codepen.io/yi-wen-chen/pen/bGmLKNz)                      |
 | --- | -------------------- | --------------------------------------------------------------------------- |
 | 44  | bonnieli1414#4906    | [codepen]( https://codepen.io/bonnieli1414/pen/yLRvEYL?editors=1100)        |
 | 45  | Aritan#1931          | [codepen]( https://codepen.io/Aritan/pen/qBJxKNj)                           |
 | 46  | ChaosTu#9311         | [codepen](https://codepen.io/torotu/pen/RweQJRy?editors=1100)               |
 | 47  | Yui1024#8275         | [codepen](https://codepen.io/Yuiyuichou/pen/qBJxKrP)                        |
 | 48  | Hao#2485             | [codepen](https://codepen.io/Seanfeb16/pen/BaqYVZb)                         |
 | 49  | SKey#9905            | [codepen](https://codepen.io/Dale-Chien/pen/yLRvEze)                        |
 | 50  | Uli#1946             | [codepen](https://codepen.io/uli1313/pen/dygdKVm)                           |
 | 51  | 呵哈#6479            | [codepen](https://codepen.io/CHYETI/pen/MWPQXXj)                            |
 | 52  | Judy☻ #7874          | [Codepen](https://codepen.io/hsiaohan/pen/ExdQRRv)                          |
 | 53  | gahwa#3562           | [Codepen](https://codepen.io/gahwa17/pen/wvYyXVB)                           |
 | 54  | peihsuan#6315        | [Codepen](https://codepen.io/peihsuanlai/pen/oNaEMgQ)                       |
 | 55  | Rey#1878             | [codepen](https://codepen.io/yfatgmpc-the-bold/pen/GRYQxOJ?editors=1100)    |
 | 56  | Rayo#8002            | [codepen](https://codepen.io/loborayo/pen/JjmpBXa)                          |
 | 57  | QOO#8446             | [codepen](https://codepen.io/QOOQOOQ/pen/MWPQBrQ?editors=1100)              |
 | 58  | ruby0316#3880        | [codepen](https://codepen.io/rena6211zera/pen/OJBQwvX)                      |
 | 59  | Ataraxia#9977        | [codepen](https://codepen.io/ataraxia8888/pen/abRwXvX)                      |
 | 60  | 陳庭#3529            | [codepen](https://codepen.io/yuting850309/pen/abRqaor)                      |
 | 61  | 泊岸#3466            | [codepen](https://codepen.io/qoq77416416/pen/yLRvKYb)                       |
 | 62  | Mindy#7886           | [codepen](https://codepen.io/Mindyr/pen/KKGQGvw)                            |
 | 63  | 小魚#8614            | [codepen](https://codepen.io/gizelliang/pen/bGmLmoP)                        |
 | 64  | liam9930#4129        | [codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/eYPVPjg?editors=1100) |
 | 65  | Eden.C#9359          | [codepen](https://codepen.io/iseden/pen/gOBvQwO)                            |
 | 66  | moins13#3346         | [codepen](https://codepen.io/kyechen13/pen/dygdQWL)                         |
 | 67  | HsuanTang#1349       | [codepen](https://codepen.io/HsuanTang/pen/xxyYQPQ)                         |
 | 68  | LeeRu#1771           | [codepen](https://codepen.io/IMGameKing/pen/eYPVQKK)                        |
 | 69  | Akira#9996           | [codepen](https://codepen.io/Akira-Chen/pen/NWOyEOj)                        |
 | 70  | Pei#5161             | [Codepen](https://https://codepen.io/Pei0303/pen/qBJxLmd)                   |
 | 71  | HsienLu#8316         | [Codepen](https://codepen.io/Hsienlu/pen/ExdQGXY)                           |
 | 72  | Kaya#8857            | [Codepen](https://codepen.io/laron9486/pen/PoyQXQO)                         |
 | 73  | 兔子#6746            | [Codepen](https://codepen.io/CarrotDetector/pen/zYmRyVr)                    |
 | 74  | henrykgb#5749        | [Codepen](https://codepen.io/henrymorgan666/pen/ExdQGqK)                    |
 | 75  | jimhop#6510          | [Codepen](https://codepen.io/jimsansssss/pen/QWZQYWP)                       |
 | 76  | Evaxof#1266          | [Codepen](https://codepen.io/evaxof/pen/QWZQYGX?editors=1100)               |
 | 77  | snow#0255            | [Codepen](https://codepen.io/snow21723/pen/abRqPZe)                         |
 | 78  | ray#2070             | [Codepen](https://codepen.io/Ray0304/pen/zYmRedN)                           |
 | 79  | Yuu#5361             | [Codepen](https://codepen.io/alycehwy/pen/gOBvqXZ)                          |
 | 80  | 吳偉雄恩#2256        | [Codepen](https://codepen.io/Bamboo1212/pen/GRYQzMY)                        |
 | 81  | Yuki#9465            | [Codepen](https://codepen.io/yukilin549/pen/wvYyNmL)                        |
 | 82  | jelly77#2088         | [Codepen](https://codepen.io/Ming-chiang/pen/VwEQgXd)                       |
 | 83  | wiimax#4564          | [codepen](https://codepen.io/willismax/pen/QWZQYxw)                         |
 | 84  | chi93#1548           | [codepen](https://codepen.io/clarahc/pen/MWPQLZb)                           |
 | 85  | andrew0404#4576      | [codepen](https://codepen.io/Loonng/pen/dygdaBg)                            |
 | 86  | 浪裡小白龍#6860      | [codepen](https://codepen.io/Emillo/pen/WNaMmNr)                            |
 | 87  | +7#8492              | [codepen](https://codepen.io/tojibom/pen/eYPVrBX)                           |
 | 88  | wendyli#2155         | [codepen](https://codepen.io/rockayumitw/pen/YzJegBP?editors=1100)          |
 | 88  | 拉斯卡爾#2696        | [codepen](https://codepen.io/novendia/pen/KKGQEbZ)                          |
 | 89  | Jennifer Chuang#3937 | [Codepen](https://codepen.io/yujhen/pen/LYgQaMK)                            |
 | 90  | Hanana#9025          | [Codepen](https://codepen.io/hananalin/pen/qBJxwbB)                         |
 | 91  | David0799#4415       | [Codepen](https://codepen.io/David0799/pen/mdzXgEO)                         |
 | 92  | Bruce-Lee#0629       | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/KKGQYWx)              |
 | 93  | jackwu#4437          | [Codepen](https://codepen.io/jackwu1588003/pen/NWOymYz)                     |
 | 94  | Janet#5784           | [Codepen](https://codepen.io/janetlinnn/pen/vYVdMqe)                        |
 | 95  | 瑪格達#9383          | [Codepen](https://codepen.io/tqndxnfc-the-sasster/pen/NWOyVKe)              |
 | 96  | 肉魚#2149            | [Codepen](https://codepen.io/zoechen13/pen/JjmpqbN)                         |
 | 97  | PoWei#8484           | [Codepen](https://codepen.io/harrison-wei-lai/pen/MWPQMvO)                  |
 | 98  | N0c7iluc3n7#4390     | [Codepen](https://codepen.io/huang-yu-cheng/pen/PoyQgWj)                    |
 | 99  | PayRoom#8328         | [CodePen](https://codepen.io/water38198/pen/rNqJEZr)                        |
 | 100 | homer#1525           | [CodePen](https://codepen.io/Buckhorn/pen/LYgQKaK)                          |
 | 101 | alll6z#9204          | [CodePen](https://codepen.io/A6Z/pen/oNaEKNN)                               |
 | 102 | betty#0693           | [CodePen](https://codepen.io/betty-hu/pen/bGmvboy?editors=1100)             |
 | 103 | 一瑋#8459            | [CodePen](https://codepen.io/zerosula/pen/bGmvVGN)                          |
 | 104 | 黑白兔#0684          | [CodePen](https://codepen.io/johnny329/pen/XWxEmqY)                         |
 | 105 | 君Jyun#0147          | [codepen](https://codepen.io/JyunCodepen/pen/poxLjqp)                       |
 | 106 | DyH#0526             | [codepen](https://codepen.io/dorihung/pen/vYVRLax)                          |
 | 107 | chichi#1534          | [codepen](https://codepen.io/chichihuang/pen/wvYmMLx)                       |
 | 108 | 依依#6306            | [codepen](https://codepen.io/Rita-Yang/pen/jOezqNJ?editors=0100)            |
 | 109 | yoyo#1003            | [codepen](https://codepen.io/pen/eYPMZGZ)                                   |
 | 110 | 喬喬#2824            | [codepen](https://codepen.io/joanne-wei/pen/rNqdePy)                        |
 | 111 | 冷曄#9378            | [codepen](https://codepen.io/HgHale/pen/ExdEyPQ)                            |
 | 112 | cbs#9007             | [Codepen](https://codepen.io/wasdjk/pen/zYmWBMJ)                            |
 | 113 | Alan0305#2423        | [codepen](https://codepen.io/alan0305/pen/vYVRXZX)                          |
 | 114 | 肉個阿倫#7172        | [Codepen](https://codepen.io/i9574385/pen/YzJaGLp)                          |
 | 115 | penny#6214           | [Codepen](https://codepen.io/penny8989/pen/VwEXPzR)                         |
 | 116 | Jaredlee#5887        | [Codepen](https://codepen.io/jared-lee/pen/oNaqBpm)                         |
 | 117 | Judy Wei#6103        | [Codepen](https://codepen.io/Judy0718/pen/poxLejV)                          |
 | 118 | 姜承#8204            | [Codepen](https://codepen.io/Troy0718/pen/KKGodby)                          |
 | 119 | 司機叔叔#2463        | [Codepen](https://codepen.io/bigv5566/pen/xxyWLeZ?editors=1100)             |
 | 120 | Pigsue#5981          | [Codepen](https://codepen.io/weixiii/pen/XWxEedm)                           |
 | 121 | Maxine#9061          | [Codepen](https://codepen.io/Maxine_Liao/pen/RweMjJb)                       |
 | 122 | Welly#3964           | [Codepen](https://codepen.io/welly09/pen/OJBvOGX)                           |
 | 123 | Rowan#3253           | [Codepen](https://codepen.io/Rowanlin/pen/vYVRpMm)                          |
 | 124 | 歐陽龍龍#1061        | [Codepen](https://codepen.io/dizzydog-rgb/pen/LYgdQxy?editors=1100)         |
 | 125 | mo#0447              | [Codepen](https://codepen.io/mozentw/pen/mdzxamr)                           |
 | 126 | Yvonne#2721          | [Codepen](https://codepen.io/Evonne/pen/PoyRMej)                            |
 | 127 | Evelyne#7323         | [Codepen](https://codepen.io/Evelynep/pen/zYmjOGx)                          |
 | 128 | 張金#7225            | [Codepen](https://codepen.io/changxchieh/pen/eYPrmNK)                       |
 | 129 | YHT#1696             | [Codepen](https://codepen.io/YHT31/pen/JjmpBjZ)                             |
 | 130 | Erikaaa#1616         | [Codepen](https://codepen.io/ChienHua/pen/WNaJvxY)                          |
 | 131 | jun777#2468          | [Codepen](https://codepen.io/js18151102/pen/yLRjymZ?editors=1100)           |
 | 132 | LYC#5516             | [Codepen](https://codepen.io/chi-yen/pen/jOexbzV)                           |
 | 133 | 提姆#9581            | [Codepen](https://codepen.io/timouo/pen/qBJoVay)                            |
 | 134 | 狸貓#5863            | [Codepen](https://codepen.io/tanuki320/pen/JjmvKgw)                         |
 | 135 | 阿榮#8277            | [Codepen](https://codepen.io/codeitaday/pen/LYgmzyb)                        |
 | 136 | Zhong#8917           | [Codepen](https://codepen.io/klfjrlod-the-sasster/pen/KKGRBvz)              |
 | 137 | Döng#2328            | [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/yLRjmdR)              |
 | 138 | Yiching#0738         | [Codepen](https://codepen.io/haruko_/pen/oNayxre?editors=1100)              |
 | 139 | 魚翅#3100            | [Codepen](https://codepen.io/Fukahire/pen/JjmZRLV)                          |
 | 140 | FanJJ#8061           | [Codepen](https://codepen.io/yfchenn/pen/yLREgJN)                           |
 | 141 | Lainie#1931          | [Codepen](https://codepen.io/Lainie88/pen/zYmaZxW?editors=1100)             |
 | 142 | 小明#4408            | [Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/XWxYPwo)              |
 | 143 | Xing#6281            | [Codepen](https://codepen.io/ting-ting-the-bold/pen/PoyayNj)                |
 | 144 | 長方形#96            | [Codepen](https://codepen.io/imjjw/pen/rNqKoOY)                             |
 | 145 | mike519#4399         | [Codepen](https://codepen.io/mike519tw/pen/abRjZWp)                         |
 | 146 | JiaYin#1196          | [Codepen](https://codepen.io/chen19970221/pen/LYgBNqR?editors=1100)         |
 | 147 | Jarvis莊#8679        | [Codepen](https://codepen.io/jason-hsuan/pen/GRYBjMR)                       |
 | 148 | 變羊魔法#6372        | [Codepen](https://codepen.io/cssf998811/pen/QWZBERj)                        |
 | 149 | grayyyy#1014         | [Codepen](https://codepen.io/jhye0222/pen/qBJMdBv)                          |
 | 150 | 鄭舜仁#6606          | [Codepen](https://codepen.io/randomno/pen/OJBoNoj)                          |
 | 151 | RyanC893412#4835     | [Codepen](https://codepen.io/mcdbfwcb-the-sans/pen/poxObKz)                 |
 | 152 | JhouHank#8132        | [Codepen](https://codepen.io/JhouHank/pen/rNqZjoL)                          |
 | 153 | 又竹#7302            | [Codepen](https://codepen.io/YO_ZU/pen/bGmxgEj)                             |
 | 154 | 貢波波夫#3056        | [Codepen](https://codepen.io/mxgrfgcr-the-bashful/pen/eYPLPXx)              |
 | 155 | Jenny真#7532         | [CodePen](https://codepen.io/wei-chen-wu/pen/BaqOEwX)                       |
 | 156 | ssshane#0673         | [CodePen](https://codepen.io/sam6091260/pen/zYmJVwx)                        |
 | 157 | SASIMI#5099          | [codepen](https://codepen.io/sashimi1327/pen/MWQwLmV)                       |
 | 157 | Joanne Hu#0010       | [codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/OJBBVEW)            |
 | 158 | 薇拉#8110            | [Codepen](https://codepen.io/michellecc0522/pen/GRYYqEM)                    |
 | 159 | 紫紫#7337            | [Codepen](https://codepen.io/picahsin/pen/QWZZaxb)                          |
 | 160 | FiReBrO#0557         | [Codepen](https://codepen.io/firebro42/pen/LYggmyO)                         |
 | 161 | Tim123#8361          | [Codepen](https://codepen.io/Wangtim4/pen/MWPzKQK)                          |
 | 162 | 柚子#3958            | [Codepen](https://codepen.io/as6625998/pen/OJBaXKE)                         |
 | 163 | hello77tw#5984       | [Codepen](https://codepen.io/luyoyo/pen/oNaQzVd)                            |
 | 164 | JasonChang#7847      | [Codepen](https://codepen.io/jsonChangJava/pen/JjmeZRv)                     |
 | 165 | 羽毛#5463            | [Codepen](https://codepen.io/KYuFeather/pen/Rweqeav)                        |
 | 166 | Elma#4317            | [Codepan](https://codepen.io/4317/pen/xxyQQgo)                              |
 | 167 | Sonia Wu#7154        | [Codepan](https://codepen.io/YUJOU/pen/NWOEeVK)                             |
 | 168 | Sonia Wu#7154        | [Codepan](https://codepen.io/YUJOU/pen/NWOEeVK)                             |
 | 169 | weiting#3489         | [Codepan](https://codepen.io/weiting14/pen/RweEPBz?editors=1100)            |
 | 170 | 五福#1395            | [Codepan](https://codepen.io/abcxyz23572/pen/MWPZwZO)                       |
 | 171 | NathanJames#8120     | [Codepan](https://codepen.io/ufo060204/pen/abRPNJE)                         |
 | 172 | Meiru#6310           | [Codepan](https://codepen.io/mei00/pen/eYPbGXy)                             |
 | 173 | Syrena #3897         | [Codepen](https://codepen.io/Syrena-Chung/pen/gOBEMqr)                      |
 | 174 | lishuan#3698         | [Codepen](https://codepen.io/lishuan/pen/poxYNjX)                           |
 | 175 | 江江#1947            | [Codepen](https://codepen.io/singing228/pen/YzJgrYa)                        |
 | 176 | 杰_jie#9088          | [Codepen](https://codepen.io/hmj8805/pen/qBJGWMR)                           |
 | 177 | 東東#5015            | [Codepen](https://codepen.io/wearymask/pen/PoygYpa)                         |
 | 178 | 路人ADCB#9851        | [Codepen](https://codepen.io/markyourpage/pen/vYVwWOR)                      |
 | 179 | 初心#9021            | [Codepen](https://codepen.io/Sylviax/pen/VwVweyX?editors=1100)              |
 | 180 | 慢慢來#4035          | [Codepen](https://codepen.io/kikiyang/pen/wvQBaJB)                          |
 | 181 | tzuyun1019#0135      | [Codepen](https://codepen.io/TzuYun1019/pen/jOQEqJm)                        |
 | 182 | ztion#8403           | [Codepen](https://codepen.io/ztion/pen/vYQEbmQ)                             |
 |   183  |   pss940909#8650                   |                                    [Codepen](https://codepen.io/pss940909/pen/OJaVjwE)                                          |
 |184|cmlb0212|[Codepen](https://codepen.io/Chungmin0212/pen/PoxPgZb)|