---
tags: 30 天軟體工程師體驗營｜2025
---
> 建議觀看的影音章節：
> - CSS - Flex 網頁排版技巧

# 🏅 切版任務 Day10 - flex 練習 I

請先觀看影音課程中的「CSS - Flex 精神時光屋」的章節，了解 flexbox 的知識點後，再練習以下題目。
## 問題

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

## 回報流程

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


<!--

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

-->

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:------------:|:------------------------------------------------------------------:|
| 1 | dean | [Codepen](https://codepen.io/ch933114/pen/dPPqJpq) |
| 2 | 随縁 | [Codepen](https://codepen.io/zuien/pen/ZYYMvyy) |
|3|Saika|[Codepen](https://codepen.io/pen/)|
|4|7Lun|[Day10-Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/azzaEjj)|
| 5 | 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/QwwVaYp)|
| 6 | HLC | [Codepen](https://codepen.io/pppbbb262626/pen/JooBMye)|
| 7 | Peggy | [Codepen](https://codepen.io/cpt23462599/pen/ZYYMrqP)|
| 8 | Daniel Huang | [Codepen](https://codepen.io/Hou-Chieh-HUANG/pen/bNNxLPK)|
| 9|JHT|[Codepen](https://codepen.io/juanht/pen/myyGXqO)|
| 10 |tina01170|[Codepen](https://codepen.io/tina-huang-the-bashful/pen/QwwVmEY)|
|11|小趴|[Codepen](https://codepen.io/papa2415/pen/QWPeOym)|
|12|消波塊|[Codepen](https://codepen.io/PaulHsiao/pen/RNNYMrL)|
|13|Aoi|[Codepen](https://codepen.io/zching07/pen/YPPOaVr)|
|14|WAWATA|[Codepen](https://codepen.io/wa-wa-GNOHC-WA-Wa/pen/LEEJdLy)|
|15|B|[Codepen](https://codepen.io/Babel777/pen/xbbaWdE)|
| 16 | mercury2508. | [CodePen](https://codepen.io/Mercury2508/pen/MYYqVvW)|
| 17 | Owen He | [CodePen](https://codepen.io/owen1120/pen/GggXxWx?editors=1100)|
| 18 | akkk | [CodePen](https://codepen.io/ak-wu-the-decoder/pen/emmLMyp)|
| 19 | Joseph_Kyuu | [CodePen](https://codepen.io/zrzfastd-the-reactor/pen/pvvOLKo)|
| 20 | 謝天 | [CodePen](https://codepen.io/crisxie/pen/raaZdYx)|
| 21 | oyll | [CodePen](https://codepen.io/dizzydog-rgb/pen/XJJPEON)|
| 22 | andy | [CodePen](https://codepen.io/ewnblckz-the-styleful/pen/vEEzRvr)|
| 23 | Ataya | [CodePen](https://codepen.io/zin-seven/pen/myyGLVv)|
| 24 | Pastor | [CodePen](https://codepen.io/peter_hung/pen/QwwVrpN)|
| 25 | RUDY | [CodePen](https://codepen.io/Rudy-crw/pen/VYYGxKE)|
| 26 | Orligege | [CodePen](https://codepen.io/S-Tung/pen/RNNyNBp)|
| 27 | 馬德 | [CodePen](https://codepen.io/maywang/pen/KwwxRVz?editors=1100)|
| 28 | 力文 | [CodePen](https://codepen.io/liwenchiou/pen/ZYYMRvm?editors=1100)|
| 29 | Chuang | [CodePen](https://codepen.io/uidoytjq-the-solid/pen/ByyOVgY)|
| 30 | Klaus Chen | [CodePen](https://codepen.io/Klaus-Chen/pen/WbbgKQa)|
| 31 | Michael - 鴿子 | [CodePen](https://codepen.io/KeinSacer_Michael/pen/gbbdjao)|
| 32 | 柔術小子 | [CodePen](https://codepen.io/Li-Lee-Everything-is-PM/full/dPPqKLp)|
| 33 | Min | [CodePen](https://codepen.io/cvqevoxk-the-decoder/pen/ZYYMjPW)|
| 34 | Zing | [CodePen](https://codepen.io/TZU-YIN-WANG/pen/EaaepJm)|
| 35 | Melanie | [CodePen](https://codepen.io/pnrcspte-the-animator/pen/MYYqBdy)|
| 36 | CharlesYang | [CodePen](https://codepen.io/kbjdutli-the-selector/pen/KwwRaNg)|
| 37 | Arthur | [CodePen](https://codepen.io/Shen-Po-Yang/pen/oggPagr)|
| 38 | WEIWEI | [CodePen](https://codepen.io/weiwei93/pen/raaJZzB)|
| 39 | Kai-Ling | [CodePen](https://codepen.io/Kai-Ling-Huang/pen/azzaRGe)|
| 40 | 登登登 | [CodePen](https://codepen.io/Duncanin/pen/zxxJJVL)|
| 41 | anson.www | [CodePen](https://codepen.io/zzkvrkzi-the-sans/pen/YPPOdwO)|
| 42 | ying | [CodePen](https://codepen.io/Lara-Lin/pen/PwwdQWW?editors=1111)|
| 43 | 00lin7183 | [CodePen](https://codepen.io/Jean-Chen-the-solid/pen/EaaeGrp)|
| 44 | BaLaLaYOU | [CodePen](https://codepen.io/bashawxd-the-bashful/pen/VYYGgjw)|
| 45 | cks40660 | [CodePen](https://codepen.io/CKS40660/pen/RNNYvRW)|
| 46 | nora_zizi | [CodePen](https://codepen.io/Nora-Ch/pen/RNNYvpr)|
| 47 | allen3290 | [CodePen](https://codepen.io/udadkudw-the-looper/pen/ZYYMwKM)|
| 48 | 牛奶 | [CodePen](https://codepen.io/0omilko0/pen/zxxJeLQ?editors=1100)|
| 50 | 林明德 | [CodePen](https://codepen.io/lwescocn-the-vuer/pen/dPPqaqG)|
| 51 | stone | [Codepen](https://codepen.io/bgrwlzoz-the-reactor/pen/ZYYMwZP)|
| 52 | Holly | [Codepen](https://codepen.io/LEE-HOLLY/pen/yyyxwBZ)|
| 53 | carrie0416 | [CodePen](https://codepen.io/Hong-Carrie/pen/NPPLJPB?editors=1100)|
| 54 | Stan | [CodePen](https://codepen.io/Stan-Huang/pen/QwwVojJ)|
| 55 | Lanmei | [CodePen](https://codepen.io/Lanmei-CodePen/pen/myyGogG)|
| 56 | Cyan66 |[Codepen](https://codepen.io/Cyan66/pen/yyyxrLe)|
| 57 | Archang |[codepen](https://codepen.io/pxfnrvgk-the-styleful/pen/qEEMvom)|
| 58 | Jane | [CodePen](https://codepen.io/jkmx/pen/MYYqRKj)|
| 59 | Leonard | [CodePen](https://codepen.io/hyyfjqra-the-sans/pen/NPPLmmb)|
| 60 | William Hsieh | [CodePen](https://codepen.io/lsaimqxa-the-vuer/pen/RNNYmPN?editors=1100)|
| 61 | suemma | [CodePen](https://codepen.io/suemma/pen/QwwVREM)|
| 62 | Fang | [CodePen](https://codepen.io/Fang-the-selector/pen/zxxJQEe?editors=1100)|
| 63 | Hank_08123 | [CodePen](https://codepen.io/hankyang1213/pen/jEEvowY)|
| 64 | taishan_90178 | [CodePen](https://codepen.io/candy99/pen/NPPLVpv)|
| 65 | 小倩 | [CodePen](https://codepen.io/Jocelyn-Nieh/pen/gbbddqp?editors=1100)|
| 66 | An | [CodePen](https://codepen.io/bzrpsbjq-the-encoder/pen/bNNxyPv)|
| 67 | yang |[codepen](https://codepen.io/Yang-J/pen/PwwdMOM?editors=1100)|
| 68 | Jessie | [Jessie 的 Codepen](https://codepen.io/bakyfkso-the-looper/pen/yyyRYQL)
| 69 | Hugh |[codepen](https://codepen.io/Hugh-Chen/pen/azzRNQe?editors=1100)|
|70|蛋殼|[Codepen](https://codepen.io/weybrian/pen/raaqLYa)
|71|Aidd.|[Codepen](https://codepen.io/aiddchen/pen/raaqMBM)
| 72 | Apple Pie | [CodePen](https://codepen.io/ymevqzjf-the-builder/pen/NPPORpW?editors=1100)|
| 73 | fishcold9714 | [CodePen](https://codepen.io/yu-han-feng/pen/QwwZdro)|
| 74 | holysi | [CodePen](https://codepen.io/holysi/pen/OPPBQxb)|
| 75 | 小懿 | [CodePen](https://codepen.io/YT-the-vuer/pen/myyzLOQ)|
| 76 | CBK | [CodePen](https://codepen.io/BK-C-the-styleful/pen/JoomvwZ)|
| 77 | haohaoliao | [CodePen](https://codepen.io/tqdtaouh-the-styleful/pen/KwwGROW?editors=1100)|
| 78 | Acadia | [CodePen](https://codepen.io/Acadia/pen/GggYBLG)|
| 79 | leo_tzou | [CodePen](https://codepen.io/JH_Portfolio/pen/RNNeBzy)|
| 80 | Sylvia | [CodePen](https://codepen.io/Sylvia93458/pen/OPPBaWz)|
| 81 | ArvinSu | [CodePen](https://codepen.io/Arvin-Su/pen/QwwZeXE)|
| 82 | ann.328 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/Kwwrpqv)|
| 83 | BL | [CodePen](https://codepen.io/bonnieli1414/pen/EaaOygq?editors=1101)|
| 84 | jingle0900 | [CodePen](https://codepen.io/EvaLi0472/pen/XJJyNBx?editors=1100)|
| 85 | kelsonhouse | [CodePen](https://codepen.io/Kelson-House/pen/jEEQyKX)|
| 86 | 阿龍 | [CodePen](https://codepen.io/Nemo-Lin/pen/MYYzppa)|
| 87 | Sonia | [CodePen](https://codepen.io/YUJOU/pen/oggQwPY)|
| 88 | 叮咚 | [CodePen](https://codepen.io/pinchieh-lin/pen/VYYVMNY)|
| 89 | 蛋白 | [蛋白的CodePen Day10](https://codepen.io/sjlu-0/pen/vEEQWoW)|
| 90 | Kath | [CodePen](https://codepen.io/JLin-the-lessful/pen/YPPRvVb)|
| 91 | GaryLin | [CodePen](https://codepen.io/kofnvgmr-the-builder/pen/WbbYyOo)|
| 92 | Chia__ | [CodePen](https://codepen.io/Chia-the-encoder/pen/azzQRbq)|
| 93 | 姜承 | [CodePen](https://codepen.io/Troy0718/pen/KKGodby?editors=1100)|
| 94 | tung | [CodePen](https://codepen.io/oltsegon-the-looper/pen/QwwzWXz)|
| 95 | bill0530 | [CodePen](https://codepen.io/rexvfzmf-the-typescripter/pen/NPPeoMN)|
| 96 | vima | [CodePen](https://codepen.io/chin7004/pen/raaoPQJ)|
| 97 | Toung | [CodePen](https://codepen.io/Toung/pen/xbbMEzR)
| 98 | duchi | [CodePen](https://codepen.io/sqaz0502/pen/xbbMqyg)|
| 99 | Astrid | [2025/05/14 DAY9](https://codepen.io/astrid321654/pen/jEEdBrQ)|
| 100 | Michael - 鴿子 | [Codepen](https://codepen.io/KeinSacer_Michael/pen/gbbdjao) |
| 101 | wei_0982 | [Codepen](https://codepen.io/nico-lai/pen/emmPZLb) |
| 102 | mambo | [Codepen](https://codepen.io/chiang_mb/pen/KwwEvNx) |
| 103 | DD | [CodePen](https://codepen.io/dorihung/pen/vEEPpNK)|
| 104 | Mic | [CodePen](https://codepen.io/Mic-Pan/pen/qEEvMwa)|
| 105 | 小豬佩奇 | [CodePen](https://codepen.io/HoPeiZhen/pen/oggVavW)|
| 106 | ja4071 | [CodePen](https://codepen.io/SHAO-L/pen/VYYOBYQ)|
| 107 | jean_ke| [CodePen](https://codepen.io/Jean-Ke/pen/Joogqwo)
| 108 | Rogan | [CodePen](https://codepen.io/RoganHsu/pen/XJbrqyz)
| 109 | 富 | [CodePen](https://codepen.io/spring40747/pen/myJdVwz)
| 110 | 木乃伊 Kimi | [CodePen](https://codepen.io/veqjtzdb-the-lessful/pen/pvJorzM?editors=1100)|
| 111 | kent_31665 | [CodePen](https://codepen.io/kentlee406/pen/OPVMWyK)|
| 112 | 野鴿 | [CodePen](https://codepen.io/HoshinoSyouta/pen/RNPrjgm)|
| 113 | Lynn | [CodePen](https://codepen.io/Yen-Ling-Peng/pen/XJbXQEG)|
| 114 | 禹成林 | [CodePen](https://codepen.io/useirin/pen/jEERaQm)|
| 114 | waynetrece | [CodePen](https://codepen.io/waynetrece/pen/RNPjNpw)|
| 115 | JiaMori | [CodePen](https://codepen.io/jiamori/pen/KwpRNYy)|
| 116 | Yanchen16 | [CodePen](https://codepen.io/keyrtlij-the-reactor/pen/NPqBJXd)|
<!--【快速複製】
| 00 | 0000 | [CodePen]()|
-- >