---
tags: 30 天軟體工程師體驗營｜2025
---
> 建議觀看的影音章節：
> - RWD - 伸縮自如的 RWD 排版術

# 🏅 切版任務 Day19 - 進階 RWD

這一週會以設計稿的「職涯諮詢成功案例」區塊來做範例解說

## 第一步：畫面區塊規劃（UI 結構分析）
我們可以先將圖片大概拆成幾個區塊，如下圖：

左側：圖片區塊
右側：文字與按鈕區塊

## 第二步：HTML 結構設計
使用簡單語意化的 HTML，並以 container, image-box, text-box 區分主要區塊：
<iframe height="300" style="width: 100%;" scrolling="no" title="每日任務 - 🏅 進階 RWD - 範例 1" src="https://codepen.io/yen-kg/embed/yyyYNWm?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/yyyYNWm">
每日任務 - 🏅 進階 RWD - 範例 1</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

1. 最外層的地方先加上 .container 作為容器的寬度。
2. 在 main-content 加上 flex 來並排 image-box, text-box 區塊，並且利用 gap 來產生間距。
3. 左側的 image-box 加上 flex: 1 1 45%; 與 min-width 來設定寬度。
flex-grow、flex-shrink 應用可以[參考連結](https://w3c.hexschool.com/flexbox/9883b0fb)。

底下這一段

flex: 1 1 45%; 

是 Flexbox 排版裡的縮寫語法，等同於：

flex-grow: 1;
flex-shrink: 1;
flex-basis: 45%;

這樣做的好處是，在寬螢幕上保持 45% 的左右比例， 但在較小螢幕時又可以讓它們自動調整大小，甚至改用 media query 改成上下排。

4. 右側的 text-box 則是使用 flex-direction: column; 來讓 text-card 垂直排列。

5. 可以透過負值 margin 的部分來重疊區塊

## 第三步：響應式設計
最後這邊利用 @media 的方式，當畫面小於 768px 的時候，將 main-content 的排列方式改成 column 就完成了。

<iframe height="300" style="width: 100%;" scrolling="no" title="每日任務 - 🏅 進階 RWD - 範例 1" src="https://codepen.io/yen-kg/embed/VYYvvYr?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/VYYvvYr">
每日任務 - 🏅 進階 RWD - 範例 1</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 題目
複製此 [CodePen](https://codepen.io/yen-kg/pen/dPPVXop) 模板，請參考下圖完成排版：


當在 768px 以下時則變成下圖排版：


## 回報流程

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


<!--

解答：
https://codepen.io/yen-kg/pen/VYYvLqW

-->

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 01 | Hank_08123 | [Codepen](https://codepen.io/hankyang1213/pen/dPPxJGq)
| 02 | 随縁 | [Codepen](https://codepen.io/anki0072011/pen/KwwOZRW)
| 03 | dean | [Codepen](https://codepen.io/ch933114/pen/pvvMpYW?editors=1100)
| 04 | Aoi | [Codepen](https://codepen.io/zching07/pen/myyNXWE)
| 05 | 謝天 |[Codepen](https://codepen.io/crisxie/pen/yyymvzx)|
| 06 | Ataya |[Codepen](https://codepen.io/zin-seven/pen/jEEgZJe)|
| 07 | Tetsu |[Codepen](https://codepen.io/ttgchang/pen/bNNXLZM)|
| 08 | Joseph_Kyuu |[Codepen](https://codepen.io/zrzfastd-the-reactor/pen/zxxgWrG)|
|09|JHT|[Codepen](https://codepen.io/juanht/pen/qEEexqe)|
| 10 | RUDY |[Codepen](https://codepen.io/Rudy-crw/pen/oggKqLZ?editors=0100)|
| 11 | Min |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/myyNxaG)|
| 12 | andy |[Codepen](https://codepen.io/ewnblckz-the-styleful/pen/YPPmLKO)|
| 13 | B |[Codepen](https://codepen.io/Babel777/pen/RNNXMYJ)|
| 14 | 登登登 |[Codepen](https://codepen.io/Duncanin/pen/GggVxXX)|
| 15 | Owen He |[Codepen](https://codepen.io/owen1120/pen/raaXvWz?editors=1100)|
| 16 | ying |[Codepen](https://codepen.io/Lara-Lin/pen/qEEeoBN?editors=1100)|
| 17 | allen3290 |[Codepen](https://codepen.io/udadkudw-the-looper/pen/YPPmvNy)|
| 18 | Melanie |[Codepen](https://codepen.io/pnrcspte-the-animator/pen/pvvMKEL)|
| 19 | akkk |[Codepen](https://codepen.io/ak-wu-the-decoder/pen/KwwOeoB)|
| 20 | pastor |[Codepen](https://codepen.io/peter_hung/pen/MYYNVEW)|
| 21 | Klaus Chen |[Codepen](https://codepen.io/Klaus-Chen/pen/vEEorqm?editors=1100)|
| 22 | 4chan |[Codepen](https://codepen.io/ijuolaqc-the-looper/pen/gbbVoya)|
| 23 | nora_zizi |[Codepen](https://codepen.io/Nora-Ch/pen/raaXZZJ)|
| 24 | NAOJUN |[Codepen](https://codepen.io/pzzpvwwp-the-styleful/pen/MYYNPWV)|
| 25 | Hugh |[Codepen](https://codepen.io/Hugh-Chen/pen/xbbvQwZ?editors=1100)|
| 26 | 7Lun |[Day19-Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/qEEeQZa)|
| 27 | WAWATA |[Codepen](https://codepen.io/wa-wa-GNOHC-WA-Wa/pen/OPPKaOo)|
| 28 | ggininder |[Codepen](https://codepen.io/wei900221/pen/vEEoQQj)|
| 29 | WEIWEI |[Codepen](https://codepen.io/weiwei93/pen/gbbVopy)|
| 30 | cks40660 |[Codepen](https://codepen.io/CKS40660/pen/myyNagd?editors=1100)|
|31|蛋殼|[Codepen](https://codepen.io/weybrian/pen/ByyXMQW)|
| 32 | stone | [Codepen](https://codepen.io/bgrwlzoz-the-reactor/pen/QwweJWZ)|
| 33 | Ariel |[Codepen](https://codepen.io/ariel0510/pen/oggKmbK?editors=1100)|
| 34 | Cyan66 |[Codepen](https://codepen.io/Cyan66/pen/bNNXJaV)|
| 35 | Holly |[Codepen](https://codepen.io/LEE-HOLLY/pen/GggVaQN)|
| 36 | Orligege |[Codepen](https://codepen.io/S-Tung/pen/MYYNMeM)|
| 37 |Hawkeye Lin|[Codepen](https://codepen.io/long-long/pen/JooggRp)
| 38 |Leonard|[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/MYwgWLa)
| 39 |jingle0900|[Codepen](https://codepen.io/EvaLi0472/pen/WbvewRE?editors=1100)
| 40 | DD |[Codepen](https://codepen.io/dorihung/pen/zxGOqqm)|
| 41 | 力文 |[Codepen](https://codepen.io/liwenchiou/pen/xbGKdVm?editors=1100)|
| 42 | oyll |[Codepen](https://codepen.io/dizzydog-rgb/pen/yyNBvPK?editors=1100)|
| 43 | mercury2508. |[Codepen](https://codepen.io/Mercury2508/pen/VYLZxLX)|
| 44 | Jane |[Codepen](https://codepen.io/jkmx/pen/Pwqopbx)|
| 45 | kelsonhouse|[Codepen](https://codepen.io/Kelson-House/pen/ZYGEvVL?editors=1100)|
| 46 | An |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/YPXzRXw?editors=1100)|
| 47 | Chuang |[Codepen](https://codepen.io/uidoytjq-the-solid/pen/bNdGJxX?editors=1100)|
| 48 | Aidd. | [Codepen](https://codepen.io/aiddchen/pen/JodoGMJ)
| 49 | tina01170 |[Codepen](https://codepen.io/tina-huang-the-bashful/pen/xbGbggo)|
| 50 | Chia__ |[Codepen](https://codepen.io/Chia-the-encoder/pen/gbpbgdx)|
|51|小趴|[Codepen](https://codepen.io/papa2415/pen/qEdEXZq)|
| 52 | wei_0982 |[Codepen](https://codepen.io/nico-lai/pen/qEdBQpO)|
| 53 | allen3290 |[Codepen](https://codepen.io/udadkudw-the-looper/pen/ByNNvoJ)|
| 54 | 消波塊 |[Codepen](https://codepen.io/PaulHsiao/pen/zxGYyNK)|
| 55 | Jessie_Yu | [Jessie_Yu 的 Codepen](https://codepen.io/bakyfkso-the-looper/pen/MYwKYYX)|
| 56 | kent_31665 |[Codepen](https://codepen.io/kentlee406/pen/vEOLJEO)|
| 57 | William Hsieh |[Codepen](https://codepen.io/lsaimqxa-the-vuer/pen/ByNpdme?editors=1100)|
| 58 | 禹成林 |[Codepen](https://codepen.io/useirin/pen/ZYGLdgz)|
| 59 | Astrid |[6/6](https://codepen.io/astrid321654/pen/wBaedKN)|
| 60 | ann.328 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/wBayvJE) |
| 61 | JiaMori |[Codepen](https://codepen.io/jiamori/pen/bNdjZqe?editors=1100)|
| 62 | Rogan |[Codepen](https://codepen.io/RoganHsu/pen/bNdxYQB)|

<!--
| number | name |[Codepen]()|
-->