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

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

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

## 回報流程

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


<!--

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

-->

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:------------:|:------------------------------------------------------------------:|
| 1 | .zack_p | [Codepen](https://codepen.io/Designer-PH/pen/rNbEzmm) |
| 2 | Camila | [Codepen](https://codepen.io/camilalo/pen/WNWqaQR) |
| 3 | 白白 | [Codepen](https://codepen.io/YuBai/pen/vYMqMmz) |
| 4 | Larry | [Codepen](https://codepen.io/larrylinr5/pen/xxevXyB) |
| 5 | Lauren | [Codepen](https://codepen.io/Lauren8/pen/qBwePJG) |
| 6 | Meng | [Codepen](https://codepen.io/menglin1203/pen/eYoqGPj) |
| 7 | DoryH | [Codepen](https://codepen.io/dorihung/pen/xxevXme) |
| 8 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/qBwePLz) |
| 09 | Aya | [Codepen](https://codepen.io/NoNameNote/pen/PogMJLb) |
| 10 | 詹姆士 | [Codepen](https://codepen.io/z111048/pen/JjVgrzq) |
| 11 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/bGJXozR) |
| 12 | Michelle0417 | [Codepen](https://codepen.io/michelle0417/pen/qBwePGe) |
| 13 | jerry | [Codepen](https://codepen.io/sony791210/pen/ZEZgXgq) |
| 14 | 小趴 | [Codepen](https://codepen.io/papa2415/pen/QWPeOym) |
| 15 | Hailey | [Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/WNWVXoJ) |
| 16 | LiLiLiLi | [Codepen](https://codepen.io/jungang0414/pen/JjVgOJd?editors=1100) |
| 17 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/oNOKopL) |
| 18 | Tough life | [Codepen](https://codepen.io/hakuei0115/pen/OJGKOBZ) |
| 19 | ninii傳教士 | [Codepen](https://codepen.io/niiniiii/pen/GRLVOXO?editors=1100) |
| 20 | mike_2049 | [Codepen](https://codepen.io/mike2049/pen/OJGKxYp) |
| 21 | Chia Pin | [Codepen](https://codepen.io/joker-cat/pen/KKYOyrE) |
| 22 | Daphne | [Codepen](https://codepen.io/DaphneShen/pen/yLrmPQW) |
| 23 | yunyouob | [Codepen](https://codepen.io/ozkkvlsu-the-animator/pen/bGJXYyQ)|
| 24 | LGJason | [Codepen](https://codepen.io/j811108/pen/VwNorNW) |
| 25 | Andy_12 | [Codepen](https://codepen.io/lifann/pen/ExJqbqK) |
| 26 | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/xxevpxR) |
| 27 | 阿若 | [Codepen](https://codepen.io/skar5268/pen/LYvweVL) |
| 28 | Yuwen | [Codepen](https://codepen.io/Yuwen-the-reactor/pen/PogMEZd) |
| 29 | WEIWEI | [Codepen](https://codepen.io/weiwei93/pen/zYXgpoo) |
| 30 | Tanyaaaa | [Codepen](https://codepen.io/tanya77777/pen/rNbXpWL) |
| 31 | Mionne | [Codepen](https://codepen.io/neohyntw/pen/eYoqyGd) |
| 32 | Emma | [Codepen](https://codepen.io/huang_L/pen/MWRNrEK) |
| 33 | s870012 | [Codepen](https://codepen.io/idzrvbnl-the-bashful/pen/qBweNXb) |
| 33 | Chen | [Codepen](https://codepen.io/yingchangchen/pen/JjVgMmp) |
| 34 | zuien1120 | [Codepen](https://codepen.io/anki0072011/pen/rNbXpQm)|
| 35 | yicheng | [Codepen](https://codepen.io/YiChengCHANG/pen/OJGKzKL)|
| 36 | Aust1n | [Codepen](https://codepen.io/AustinYEH/pen/PogMQwY)|
| 37 | 阿宸 | [Codepen](https://codepen.io/xnocndjt-the-sans/pen/zYXgRvR) |
| 38 | arielyao| [Codepen](https://codepen.io/ArielYao822/pen/QWPeQvd) |
| 39 | LYC | [Codepen](https://codepen.io/LY-C/pen/WNWVMrx) |
| 40 | kawa | [Codepen](https://codepen.io/z83xji6/pen/wvZVypz) |
| 41 | macihuang | [Codepen](https://codepen.io/macy1215/pen/wvZVymo) |
| 42 | boin | [Codepen](https://codepen.io/boinji/pen/BaEXYGp) |
| 43 | JUN_ | [Codepen](https://codepen.io/Jun-L/pen/PogMQMW) |
| 44 | 小米 | [Codepen](https://codepen.io/hlgudwue-the-typescripter/pen/yLrmPLq) |
| 45 | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/MWRNVPM)|
| 46 | Eden | [Codepen](https://codepen.io/iseden/pen/NWmQYJE)|
| 47 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/PogMeYa)|
| 48 | Angela_la | [Codepen](https://codepen.io/Angela-the-builder/pen/xxevWoE?editors=1100) |
| 49 | 黑嚕嚕 | [Codepen](https://codepen.io/wzokvjha-the-vuer/pen/mdgNLBG) |
| 50 | Winnie | [Codepen](https://codepen.io/codepen-io-winnie/pen/KKYOoax?editors=1100) |
| 51 | Jiahe | [Codepen](https://codepen.io/Andywang-95/pen/JjVgZdZ) |
| 52 | Casey | [Codepen](https://codepen.io/Caseyyyyyyyyyyyyyy/pen/abxeKZK) |
| 53 | sylviabuy | [Codepen](https://codepen.io/sylviabela/pen/JjVgZeV) |
| 54 |james867.|[Codepen](https://codepen.io/JCT34/pen/ZEZgRKa?editors=1100)|
| 55 | JESS | [Codepen](https://codepen.io/-8412/pen/QWPeBym) |
| 56 | brucelee0629 | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/JjVgBeX) |
| 57 | 秀 | [Codepen](https://codepen.io/Alyssa-CHEN-the-bashful/pen/oNOKMrZ) |
| 58 | suandme | [Codepen](https://codepen.io/su-su-the-sans/pen/BaEXPgP) |
| 59 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/NWmQBby) |
| 60 | arvin | [Codepen](https://codepen.io/arvinyang1925/pen/abxeaWJ) |
| 61 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/LYvwJLz) |
| 62 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/ExJqemZ) |
| 63 | ss585801 | [Codepen](https://codepen.io/ss585801/pen/WNWVXya) |
| 64 | 快樂小豬 | [Codepen](https://codepen.io/rtjowfyf-the-lessful/pen/QWPeOpx?editors=1111)|
| 65 | KUN. | [Codepen](https://codepen.io/barry91205/pen/XWQvxWe) |
| 66 | Jenny_7314 | [Codepen](https://codepen.io/Jenny_000/pen/wvZVYMa?editors=1100) |
| 67 | qet1717 | [Codepen](https://codepen.io/yizukwgs-the-flexboxer/pen/WNWVapG) |
| 68 | zito | [Codepen](https://codepen.io/zito1130/pen/XWQvxgE) |
| 69 | Anna |[Codepen](https://codepen.io/Anna-Teng/pen/bGJXmJW)|
| 70 | MY | [Codepen](https://codepen.io/ahmomoz/pen/eYoqQJb) |
| 71 | han | [Codepen](https://codepen.io/Han-Chen-the-flexboxer/pen/MWRNzmZ?editors=1100) |
| 72 | Maxine | [Codepen](https://codepen.io/Maxine0713/pen/VwNoVgb) |
| 73 | JY | [Codepen](https://codepen.io/jylee0805/pen/WNWVYWY?editors=1100) |
| 74 | leo.chang | [Codepen](https://codepen.io/s16777216/pen/ZEZgVoO) |
| 75 | Zander | [Codepen](https://codepen.io/chuangmaster/pen/ExJqMXq) |
| 76 | JIAWUN | [Codepen](https://codepen.io/wkasixgv-the-sasster/pen/dyLxxpV) |
| 77 | yuling | [Codepen](https://codepen.io/igzdflpu/pen/BaEXXxE) |
| 78 | lynn-1002 | [Codepen](https://codepen.io/LyNnYWu/pen/VwNooxx) |
| 79 | yun4081025 | [Codepen](https://codepen.io/Yun-Chang-the-decoder/pen/XWQvvYp) |
| 80 | oldan | [Codepen](https://codepen.io/Enix-Chien-/pen/abroogX) |
| 81 | asabulu_von_f | [Codepen](https://codepen.io/asabulu/pen/gOJYOPL) |
| 82 | 薛逢 | [Codepen](https://codepen.io/vogqyrrj-the-selector/pen/KKLPKMR) |
| 83 | Mars | [Codepen](https://codepen.io/Mars-the-flexboxer/pen/oNRvNWj)
| 84 | jerry_66983 | [Codepen](https://codepen.io/Barry-C/pen/jOoNOYp?editors=1100) |
| 85 | mike00712 | [Codepen](https://codepen.io/buliyuil-the-animator/pen/jOoNENJ) |
| 86 | tzhengliin(子恆) | [Codepen](https://codepen.io/tzhengliin/pen/YzbKPQe) |
| 87 | liugod3824🔥 |[Codepen](https://codepen.io/kjssvtkr-the-animator/pen/gOJYbvQ)✔|
| 88 | 黛西 |[Codepen](https://codepen.io/ChiashengLin/pen/dyEbPqm)|
| 89 | damon0323 |[Codepen](https://codepen.io/swk9eny2/pen/vYwBEWj)|
| 90 | Yini Chen | [Codepen](https://codepen.io/CYini/pen/oNRvXVr) |
| 91 | Eileen | [Codepen](https://codepen.io/Eileen-io/pen/PovYPjj) |
| 92 | Elva Su | [Codepen](https://codepen.io/evensu_/pen/LYoPVRJ?editors=1100)|
| 93 | FURUTO | [Codepen](https://codepen.io/oditudnw-the-flexboxer/pen/JjqPKGQ)|
| 94 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/mdYbEEE) |
| 95 | Joey一針 | [Codepen](https://codepen.io/joeychou/pen/BaeBzvr) |
| 96 | Maca | [CodePen](https://codepen.io/uimaca/pen/jOoNVbq) |
| 97 | wei| [CodePen](https://codepen.io/Wei-the-sasster/pen/WNBepMq)|
|98|Ran|[Codepen](https://codepen.io/Ran-Ran-the-typescripter/pen/rNgBJdp)|
| 99 | oyll | [Codepen](https://codepen.io/dizzydog-rgb/pen/oNRvEEJ) |
| 100 | Chingya | [Codepen](https://codepen.io/chingya1214/pen/XWwrZvP) |
| 101 | 勾小勻 | [Codepen](https://codepen.io/qkvyujcc-the-encoder/pen/QWRLmMQ) |
| 102 | Chieh | [Codepen](https://codepen.io/Wei-Chieh-T/pen/dyEbmRo) |
| 103 | Peggy | [Codepen](https://codepen.io/peggy0419/pen/rNgBvPW) |
| 104 | maru3096| [Codepen](https://codepen.io/deamru/pen/mdYbzBY)|
| 105 | Linfe| [Codepen](https://codepen.io/Linfe/pen/PovYxZG)|
| 106 | kevinwen2014 | [Codepen](https://codepen.io/wenwoo/pen/GRaRppp?editors=1100) |
| 107 | Ellie| [Codepen](https://codepen.io/Ellie-Chiang/pen/wvZVWNY)|
| 108 | MDFK | [Codepen](https://codepen.io/aqcrrhwb/pen/MWdWbpb?editors=1100) |
| 109 | ㄚ華 | [Codepen](https://codepen.io/rzzuehiv-the-vuer/pen/ExzxNOL?editors=1100) |
| 110 | CrystalLala | [Codepen](https://codepen.io/crystallala/pen/LYoYxPq) |
| 111 | Six | [Codepen](https://codepen.io/Max-kuo/pen/ZENEJjY) |
| 112 | Mico | [Codepen](https://codepen.io/Mico-the-bold/pen/xxNxpzE) |
| 113 | papaya | [Codepen](https://codepen.io/rgtilwze-the-animator/pen/jORoOdP) |
| 114 | discat3119|[Codepen](https://codepen.io/dizzysoup/pen/KKLwwdx)
| 115 | Toung | [Codepen](https://codepen.io/Toung/pen/oNRgxdy)
| 116 | yo0x0oy |[Codepen](https://codepen.io/Dayton-Hsieh/pen/WNBbwyv)
| 117 | Aasta | [Codepen](https://codepen.io/Aasta-the-typescripter/pen/BaeyzvW?editors=1100)
| 118 | Schnauzer | [Codepen](https://codepen.io/Cocker-Spaniel/pen/LYoEbye) |
| 119 | Sana | [Codepen](https://codepen.io/-Chouno/pen/vYwEJex) |
| 120 | easonpan | [Codepen](https://codepen.io/easonpan0904/pen/vYwEWEM) |
| 121 | wan_ju | [Codepen](https://codepen.io/Laura21/pen/jOoEamm) |
| 122 | emmayo | [Codepen](https://codepen.io/emmayo/pen/wvbBxPW) |
| 123 | 雪維 | [Codepen](https://codepen.io/Shawey/pen/VwOYGym) |
| 124 | Areta | [Codepen](https://codepen.io/Areta-Gu/pen/YzbXPbQ) |
| 125 | 小白 | [Codepen](https://codepen.io/xjbowjbr-the-builder/pen/ExzjKdm) |
| 126 | 咖 | [Codepen](https://codepen.io/daru-Ga/pen/MWdwPJg) |
| 127 | 真真瑋瑋 | [Codepen](https://codepen.io/Yujhen-Li/pen/LYopPvO) |
| 128 | ZZ | [Codepen](https://codepen.io/Yong-Shao/pen/xxNwLKy) |
| 129 | jimmy.0706 | [Codepen](https://codepen.io/JimmyMao/pen/XWwmLNp) |
| 130 | flyingcatman5487 | [Codepen](https://codepen.io/ysklpokt-the-looper/pen/NWVxryW?editors=1100) |
| 131 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/ZENQadK) |

---

<!--【快速複製】

-- >