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

# 🏅 切版任務 Day11 - flex 練習 II
請先觀看影音課程中的「CSS - Flex 精神時光屋」的章節，了解 flexbox 的知識點後，再練習以下題目。
## 問題
運用 flex 將圖形呈現如下圖：

> 方形色塊資訊：
> - `400px * 400px` `#a73836`
> - `110px * 100px` `#ffffff`

## 回報流程

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


<!--

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

-->

回報區
---

| 報數 | Discord 名字 | CodePen／其他回饋 |
|:----:|:------------:|:----------------------------------------------------------------------------:|
| 1 | 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/NPPEarr) |
| 2 | Owen He | [Codepen](https://codepen.io/owen1120/pen/emmQGEV?editors=1100) |
|3|小趴|[Codepen](https://codepen.io/papa2415/pen/dyLxxxq)|
| 4 | 随縁 | [Codepen](https://codepen.io/zuien/pen/EaaOwvp) |
| 5 | dean | [Codepen](https://codepen.io/ch933114/pen/ZYYmXrx) |
| 6 | 7Lun | [Day11-Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/ByyGwmz) |
| 7 | tina01170 | [Codepen](https://codepen.io/tina-huang-the-bashful/pen/PwwxOYW) |
| 8 | Hank_08123 | [Codepen](https://codepen.io/hankyang1213/pen/GggwMbj) |
| 9 | 謝天 | [Codepen](https://codepen.io/crisxie/pen/YPPRrmy) |
| 10 |JHT|[Codepen](https://codepen.io/juanht/pen/MYYZBBZ)|
| 11 |登登登|[Codepen](https://codepen.io/Duncanin/pen/OPPaxYW)|
| 12 |Aoi|[Codepen](https://codepen.io/zching07/pen/vEEzRmW)|
| 13 |HLC|[Codepen](https://codepen.io/pppbbb262626/pen/OPPaOgO)|
| 14 | Joseph_Kyuu | [Codepen](https://codepen.io/zrzfastd-the-reactor/pen/WbbYXGz) |
| 15 | Melanie | [Codepen](https://codepen.io/pnrcspte-the-animator/pen/JooeOyd?editors=1100) |
| 16 | jingle0900 | [Codepen](https://codepen.io/zrzfastd-the-reactor/pen/WbbYXGz) |
| 17 | Ataya | [Codepen](https://codepen.io/zin-seven/pen/ByyGmJY) |
| 18 | andy | [Codepen](https://codepen.io/ewnblckz-the-styleful/pen/qEEQVxb) |
| 19 | Daniel Huang | [Codepen](https://codepen.io/Hou-Chieh-HUANG/pen/OPPaOwv)|
| 20 | William Hsieh | [Codepen](https://codepen.io/lsaimqxa-the-vuer/pen/jEEQYNR?editors=1100) |
| 21 | akkk | [Codepen](https://codepen.io/ak-wu-the-decoder/pen/oggQpbe) |
| 22 | 蛋白 | [蛋白的Codepen Day11](https://codepen.io/sjlu-0/pen/ZYYmvG) |
| 23 | mercury2508. | [Codepen](https://codepen.io/Mercury2508/pen/qEEQpZm) |
| 24 | Min | [Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/PwwxEwB) |
| 25 | pastor | [Codepen](https://codepen.io/peter_hung/pen/QwwJave) |
| 26 | Peggy | [Codepen](https://codepen.io/cpt23462599/pen/GggwyXz) |
| 27 | BaLaLaYOU | [Codepen](https://codepen.io/bashawxd-the-bashful/pen/qEEQpop) |
| 28 | ying | [Codepen](https://codepen.io/Lara-Lin/pen/emmQyxv?editors=1111) |
| 29 | Orligege | [Codepen](https://codepen.io/S-Tung/pen/EaaOLZN) |
| 30 | 馬德 | [Codepen](https://codepen.io/maywang/pen/XJJyqbX?editors=1100) |
| 31 | WAWATA | [Codepen](https://codepen.io/wa-wa-GNOHC-WA-Wa/pen/YPPRJyB) |
| 32 | cks40660 | [Codepen](https://codepen.io/hexschool/pen/dyqEGoZ) |
|33| Saika| [Codepen](https://codepen.io/saika4501/pen/MYYzBoZ?editors=1100)|
| 34 | Sylvia_1121 | [Codepen](https://codepen.io/Sylvia93458/pen/ZYYmwWy) |
| 35 | 阿龍 | [Codepen](https://codepen.io/Nemo-Lin/pen/xbbQayP) |
| 36 | nora_zizi | [Codepen](https://codepen.io/Nora-Ch/pen/QwwJPZw) |
| 37 | RUDY | [Codepen](https://codepen.io/Rudy-crw/pen/emmQoov?editors=1100) |
| 38 | WEIWEI | [Codepen](https://codepen.io/weiwei93/pen/gbbvdvv) |
| 39 | 力文 | [Codepen](https://codepen.io/liwenchiou/pen/PwwXYbY) |
|40|蛋殼|[Codepen](https://codepen.io/weybrian/pen/ByyvBdo)
| 41 | 林明德 | [Codepen](https://codepen.io/lwescocn-the-vuer/pen/LEEXoYr) |
| 42 | ann.328 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/raaoNKE) |
| 43 | aka |[Codepen](https://codepen.io/gfbmnvas-the-animator/pen/GggPJmV) |
| 44 | oyll |[Codepen](https://codepen.io/dizzydog-rgb/pen/EaaGjMO?editors=1100) |
| 45 | Jessie_Yu | [Jessie_Yu 的 Codepen](https://codepen.io/bakyfkso-the-looper/pen/gbbZabw)
| 46 | Cyan66 | [Codepen](https://codepen.io/Cyan66/pen/EaaGjyQ) |
| 47 | haohaoliao | [Codepen](https://codepen.io/tqdtaouh-the-styleful/pen/wBBRaKv?editors=1100) |
| 48 | stone | [Codepen](https://codepen.io/bgrwlzoz-the-reactor/pen/OPPrMmB)|
| 49 | 小倩 | [Codepen](https://codepen.io/Jocelyn-Nieh/pen/gbbddqp?editors=1100) |
| 50 | carrie0416 | [Codepen](https://codepen.io/Hong-Carrie/pen/KwwbVYd) |
| 51 | Chia__ | [Codepen](https://codepen.io/Chia-the-encoder/pen/XJJyxYB) |
| 52 | Holly | [Codepen](https://codepen.io/LEE-HOLLY/pen/zxxyxJZ) |
| 53 | CBK | [Codepen](https://codepen.io/BK-C-the-styleful/pen/XJJoKJy) |
| 54 | FangFang | [Codepen](https://codepen.io/Fang-the-selector/pen/JoowKOj?editors=1100) |
| 55 | 柔術小子 | [Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/yyyQZGv) |
| 56 | Hugh | [Codepen](https://codepen.io/Hugh-Chen/pen/qEELNvZ) |
| 57 | kururu110 | [Codepen](https://codepen.io/ecqyjuck-the-decoder/pen/KwwbMJb) |
| 58 | yang |[codepen](https://codepen.io/Yang-J/pen/EaaGyqj?editors=1100)|
| 59 | leo_tzou | [Codepen](https://codepen.io/JH_Portfolio/pen/wBBRzME) |
| 60 | Zing | [Codepen](https://codepen.io/TZU-YIN-WANG/pen/gbbQoNN) |
| 61 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/OPPrmjP) |
| 62 | B | [Codepen](https://codepen.io/Babel777/pen/qEELVPB) |
| 63 | Aidd. | [Codepen](https://codepen.io/aiddchen/pen/azzPEqp) |
| 64 | 消波塊 | [Codepen](https://codepen.io/PaulHsiao/pen/pvvqVOv) |
| 65 | Chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/EaaGpoz) |
| 66 | ggininder | [Codepen](https://codepen.io/wei900221/pen/wBBRQmr) |
| 67 | 牛奶 | [Codepen](https://codepen.io/0omilko0/pen/VYYqaXN?editors=1100) |
| 68 | vima | [Codepen](https://codepen.io/chin7004/pen/pvvqYZO) |
| 69 | allen3290 | [Codepen](https://codepen.io/udadkudw-the-looper/pen/QwwzRQE) |
| 70 | Leonard | [Codepen](https://codepen.io/hyyfjqra-the-sans/pen/vEEbBNz) |
| 71 | 姜承 | [Codepen](https://codepen.io/Troy0718/pen/yLRKXjz?editors=1100) |
| 72 | 叮咚 | [Codepen](https://codepen.io/pinchieh-lin/pen/VYYVrYv) |
| 73 | Toung | [CodePen](https://codepen.io/Toung/pen/vEEbXPR)|
| 74 | Michael - 鴿子 | [Codepen](https://codepen.io/KeinSacer_Michael/pen/pvvqaBW) |
| 75 | wei_0982 | [Codepen](https://codepen.io/nico-lai/pen/LEEXoOM) |
| 76 | tung | [Codepen](https://codepen.io/oltsegon-the-looper/pen/bNNOQXM) |
| 77 | DD | [Codepen](https://codepen.io/dorihung/pen/ByybdVx) |
| 78 | Jane | [Codepen](https://codepen.io/jkmx/pen/raaqOGa) |
| 79 | BL | [Codepen](https://codepen.io/bonnieli1414/pen/YPPbWmo?editors=1101) |
| 80 | Kath | [Codepen](https://codepen.io/JLin-the-lessful/pen/wBBbqpd) |
| 81 | ArvinSu | [Codepen](https://codepen.io/Arvin-Su/pen/VYYOzNa)
| 82 | ja4071 | [Codepen](https://codepen.io/SHAO-L/pen/bNNyjrb) |
| 83 | An | [Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/YPPRYxL) |
| 84 | 富 | [Codepen](https://codepen.io/spring40747/pen/GgJRode) |
| 85 | 木乃伊 Kimi | [Codepen](https://codepen.io/veqjtzdb-the-lessful/pen/bNdGreZ)
| 86 | kelsonhouse| [Codepen](https://codepen.io/Kelson-House/pen/wBavjMR)|
| 87 | kent_31665 | [Codepen](https://codepen.io/kentlee406/pen/xbGZgVW) |
| 88 | Lynn | [Codepen](https://codepen.io/Yen-Ling-Peng/pen/VYLeJqN) |
| 89 | 禹成林 | [Codepen](https://codepen.io/useirin/pen/EajgXZy) |
| 90 | Astrid | [6/6](https://codepen.io/astrid321654/pen/azOwogG?editors=1100) |
| 91 | waynetrece | [Codepen](https://codepen.io/waynetrece/pen/dPoJxNq?editors=1100) |
| 92 | JiaMori | [Codepen](https://codepen.io/jiamori/pen/KwpRLyN) |

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