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

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

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

## 回報流程

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


<!--

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