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

# 🏅 切版任務 Day12 - flex 運用

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

## 問題
練習運用 flex 語法切版：


文字提供:

最新資訊
促銷活動
休閒鞋類
工作鞋類
兒童鞋類
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti quis, vero quaerat debitis ea omnis ratione? Voluptatem, quibusdam dolor reprehenderit recusandae minima voluptates accusantium asperiores molestias? Saepe eveniet fugiat asperiores. Tempora assumenda omnis harum explicabo. Ipsa, tempora sequi! Aliquam excepturi id illo perferendis fuga eligendi doloremque, praesentium recusandae minus quam et odio tempore sequi qui? Facere quasi ipsum corrupti culpa.
上一頁
下一頁

## 回報流程

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


<!--

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

-->

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:------------:|:-----------------------------------------------------------------:|
|1|小趴|[Codepen](https://codepen.io/papa2415/pen/NWVWWwa)|
|2|dean|[Codepen](https://codepen.io/ch933114/pen/qEELPJL?editors=1100)|
| 3 | 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/NPPeaMr) |
| 4 | 随縁 | [Codepen](https://codepen.io/zuien/pen/myyaqEP) |
| 5 | Owen He | [Codepen](https://codepen.io/owen1120/pen/MYYZEdQ?editors=1100) |
| 6 | 7Lun | [Day12-Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/pvvqdyL) |
| 7 | tina01170 | [Day12-Codepen](https://codepen.io/tina-huang-the-bashful/pen/RNNEjBK?editors=1100) |
| 8 | Daniel Huang | [Codepen](https://codepen.io/Hou-Chieh-HUANG/pen/NPPewKj) |
| 9 | jingle0900 | [Codepen](https://codepen.io/EvaLi0472/pen/bNNOYRo?editors=1100) |
| 10 | Ataya | [Codepen](https://codepen.io/zin-seven/pen/raaopON) |
| 11 | 謝天 | [Codepen](https://codepen.io/crisxie/pen/XJJozXy) |
| 12 | Joseph_Kyuu | [Codepen](https://codepen.io/zrzfastd-the-reactor/pen/azzPVYe) |
| 13 | Hugh | [Codepen](https://codepen.io/Hugh-Chen/pen/PwwXEGe) |
| 14 | Sylvia | [Codepen](https://codepen.io/Sylvia93458/pen/azzPVqe) |
| 15 | oyll | [Codepen](https://codepen.io/dizzydog-rgb/pen/raaopWV?editors=1100) |
| 16 | HLC | [Codepen](https://codepen.io/pppbbb262626/pen/MYYZrKN?editors=1100) |
| 17 | Ali | [Codepen](https://codepen.io/Alicia1117/pen/ZYYVvob) |
| 18 | ying | [Codepen](https://codepen.io/Lara-Lin/pen/GggPyyG?editors=1111) |
| 19 | andy | [Codepen](https://codepen.io/ewnblckz-the-styleful/pen/XJJoZXg) |
| 20 | pastor | [Codepen](https://codepen.io/peter_hung/pen/oggJEWa) |
| 21 | RUDY | [Codepen](https://codepen.io/Rudy-crw/pen/PwwXQMN?editors=1100) |
| 22 | akkk | [Codepen](https://codepen.io/ak-wu-the-decoder/pen/qEELoMd) |
| 23 | Min | [Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/QwwzmJB) |
| 24 | Chia__ | [Codepen](https://codepen.io/Chia-the-encoder/pen/jEEXzOG) |
| 25 | Hank_08123 | [Codepen](https://codepen.io/hankyang1213/pen/oggJqEX) |
| 26 | DD | [Codepen](https://codepen.io/dorihung/pen/wBBRmmP) |
| 27 | 馬德 | [Codepen](https://codepen.io/maywang/pen/MYYZVPZ?editors=1100) |
| 28 | 力文 | [Codepen](https://codepen.io/liwenchiou/pen/xbbmjbZ?editors=1100) |
| 29 | klaus chen | [Codepen](https://codepen.io/Klaus-Chen/pen/qEELoLO?editors=1100) |
| 30 | Aidd. | [Codepen](https://codepen.io/aiddchen/pen/MYYZGZK) |
| 31 | 登登登 | [Codepen](https://codepen.io/Duncanin/pen/MYYZVqZ) |
| 32 | Melanie | [Codepen](https://codepen.io/pnrcspte-the-animator/pen/pvvqVKo?editors=1100) |
| 33 | Aoi | [Codepen](https://codepen.io/zching07/pen/qEELpep) |
| 34 | WAWATA | [Codepen](https://codepen.io/wa-wa-GNOHC-WA-Wa/pen/OPProMZ) |
| 35 | 柔術小子 | [Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/zxxyWLV) |
| 36 | B | [Codepen](https://codepen.io/Babel777/pen/KwwbxNY) |
|37|JHT|[Codepen](https://codepen.io/juanht/pen/myyaGEq)|
| 38 | WEIWEI | [Codepen](https://codepen.io/weiwei93/pen/myyXGgL) |
| 39 | 消波塊 | [Codepen](https://codepen.io/PaulHsiao/pen/RNNEBwN) |
| 40 | nora_zizi | [Codepen](https://codepen.io/Nora-Ch/pen/MYYZBMR) |
|41|蛋殼|[Codepen](https://codepen.io/weybrian/pen/gbbZQbP)
| 42 | Chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/pvvqxjy?editors=1100) |
| 43 | mercury2508. | [Codepen](https://codepen.io/Mercury2508/pen/QwwzBVx) |
| 44 | ann.328 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/vEEvbOV) |
| 45 | yang |[codepen](https://codepen.io/Yang-J/pen/XJJoOzz?editors=1100)|
| 46 | cks40660 | [Codepen](https://codepen.io/CKS40660/pen/GggPzgP) |
| 47 | Holly | [Codepen](https://codepen.io/LEE-HOLLY/pen/dPPwwgJ) |
|48|Saika|[Codepen](https://codepen.io/saika4501/pen/raaoPzz?editors=1100)|
| 49 | Jane | [Codepen](https://codepen.io/jkmx/pen/wBBROvo) |
| 50 | Orligege | [Codepen](https://codepen.io/S-Tung/pen/PwwXLqN) |
| 51 | stone | [Codepen](https://codepen.io/bgrwlzoz-the-reactor/pen/jEEXJVa)|
| 52 | Peggy | [Codepen](https://codepen.io/cpt23462599/pen/vEEvbpP)|
| 53 | aka | [Codepen](https://codepen.io/gfbmnvas-the-animator/pen/YPPdgoN) |
| 54 | allen3290 | [Codepen](https://codepen.io/udadkudw-the-looper/pen/gbbZyme) |
| 55 | An | [Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/WbbLmdd?editors=1100) |
| 56 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/RNNEvzw) |
| 57 | Cyan66 | [Codepen](https://codepen.io/Cyan66/pen/MYYZRrW) |
| 58 | leo_tzou | [Codepen](https://codepen.io/JH_Portfolio/pen/dPPwxWW) |
| 59 | Zing | [Codepen](https://codepen.io/TZU-YIN-WANG/pen/vEEvWay) |
| 60 | CBK | [Codepen](https://codepen.io/BK-C-the-styleful/pen/KwwJPdd?editors=1100) |
| 61 | Leonard | [Codepen](https://codepen.io/hyyfjqra-the-sans/pen/qEEgEOZ) |
| 62 | carrie0416 | [Codepen](https://codepen.io/Hong-Carrie/pen/raaoboL) |
| 63 | 姜承 | [Codepen](https://codepen.io/Troy0718/pen/GRYxedK?editors=1100) |
| 64 | BaLaLaYOU | [Codepen](https://codepen.io/bashawxd-the-bashful/pen/xbbMgbQ?editors=1100) |
| 65 | 林明德 | [Codepen](https://codepen.io/lwescocn-the-vuer/pen/qEEgrYR) |
| 66 | William Hsieh | [Codepen](https://codepen.io/lsaimqxa-the-vuer/pen/bNNzrRx?editors=1100) |
| 67 | Toung | [Codepen](https://codepen.io/Toung/pen/emmxRmV)
| 68 | Michael - 鴿子 | [Codepen](https://codepen.io/KeinSacer_Michael/pen/gbbZeQx) |
| 69 | tung | [Codepen](https://codepen.io/KeinSacer_Michael/pen/gbbZeQx) |
| 70 | wei_0982 | [Codepen](https://codepen.io/nico-lai/pen/JoowmJv) |
| 71 | Jessie_Yu | [Jessie_Yu 的 Codepen](https://codepen.io/bakyfkso-the-looper/pen/JooVyQG)
| 72 | 牛奶 | [Codepen](https://codepen.io/0omilko0/pen/EaaGGMW?editors=1100) |
| 73 | 阿龍 | [Codepen](https://codepen.io/Nemo-Lin/pen/MYYRBVv) |
| 74 | fishcold9714 | [Codepen](https://codepen.io/yu-han-feng/pen/oggJRgq) |
| 75 | BL | [Codepen](https://codepen.io/bonnieli1414/pen/yyyWVew?editors=1100) |
| 76 | An | [Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/WbbLmdd) |
| 77 | ArvinSu | [Codepen](https://codepen.io/Arvin-Su/pen/QwwXOQW) |
| 78 | ja4071 | [Codepen](https://codepen.io/SHAO-L/pen/ByygOYz)|
| 79 | vima | [Codepen](https://codepen.io/chin7004/pen/yyymLvN) |
| 80 | Stan | [Codepen](https://codepen.io/Stan-Huang/pen/vEOBNdp) |
| 81 | 木乃伊 Kimi | [Codepen](https://codepen.io/veqjtzdb-the-lessful/pen/dPoyzVm?editors=1100) |
| 82 | kelsonhouse|[Codepen_A](https://codepen.io/Kelson-House/pen/zxGYjgP?editors=1100)|
| 83 | kelsonhouse|[Codepen_B](https://codepen.io/Kelson-House/pen/XJbWqgN?editors=1000)|
| 84 | 富|[Codepen](https://codepen.io/spring40747/pen/LEVEzZB)|
| 85 | kent_31665 | [Codepen](https://codepen.io/kentlee406/pen/ZYGQLwx?editors=1100) |
| 86 | 禹成林 | [Codepen](https://codepen.io/useirin/pen/pvJNmRW) |
| 87 | Astrid | [6/6](https://codepen.io/astrid321654/pen/JodJozE?editors=1100) |
| 88 | JiaMori | [Codepen](https://codepen.io/jiamori/pen/EajRvLy) |
| 89 | 叮咚 | [Codepen](https://codepen.io/pinchieh-lin/pen/xbGaOpy) |

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