---
# System prepended metadata

title: "\U0001F3C5 Day 16"
tags: [網頁切版直播班 - 2022 夏季班]

---

---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 16

## flex 完成九宮格排版

請嘗試在「`...`」的地方加上 CSS flex 屬性完成以下圖片中的排版

![](https://i.imgur.com/lBLQVuP.jpg)

HTML
```htmlembedded=
<div class="container">
  <ul class="list">
    <li><img src="https://images.unsplash.com/photo-1602874268377-82a72d59ef4c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt=""></li>
    <li><img src="https://images.unsplash.com/photo-1603143422172-2568ea9680ac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt=""></li>
    <li><img src="https://images.unsplash.com/photo-1603135200184-96051b5ede9a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt=""></li>
    <li><img src="https://images.unsplash.com/photo-1590532740179-b7472613c3c4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt=""></li>
    <li><img src="https://images.unsplash.com/photo-1603162361859-49444c0aaebc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt=""></li>
    <li><img src="https://images.unsplash.com/photo-1603182737247-6419d55c10bd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt=""></li>
    <li><img src="https://images.unsplash.com/photo-1603135200184-96051b5ede9a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt=""></li>
    <li><img src="https://images.unsplash.com/photo-1603188389888-7b80bd0a7e3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt=""></li>
    <li><img src="https://images.unsplash.com/photo-1602874268377-82a72d59ef4c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt=""></li>
  </ul>
</div>
```
CSS
```css=
.container {
  width: 1200px;
  margin: 0 auto;
}
.list {
  ...
}
img {
  width: 400px;
  height: 100%;
  display: block;
}
```
> 記得加上 CSS Reset

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：https://codepen.io/hexschool/pen/NWYWKXP -->


回報區
---


|      Discord      |                           CodePen / 答案                            |
|:-----------------:|:-------------------------------------------------------------------:|
|     薏慈#3795     |           [CodePen](https://codepen.io/its_wang/pen/bGvKLyy)           |
|     小鐵#2814     |           [CodePen](https://codepen.io/xiron/pen/WNzRqbw)           |
|   Anna Liu#3794   |          [CodePen](https://codepen.io/anna618/pen/OJvWdXr)          |
|     𝓛𝓊𝒸𝓎#8635     |         [CodePen](https://codepen.io/lucygirl/pen/PoRZNLR)          |
|   CloThEs#7837    |         [CodePen](https://codepen.io/CloThEsZ/pen/JjLEeNw)          |
|    布魯諾#7239    |         [CodePen](https://codepen.io/bruno-yu/pen/BarpGrQ)          |
|      YC#2522      |           [Codepen](https://codepen.io/YCLu/pen/eYMgQMK)            |
|   Daisy_Li#4231   |    [CodePen](https://codepen.io/lidairong-gmail-com/pen/GRxrwxo)    |
|  Karol-Kuo#5287   |        [CodePen](https://codepen.io/ting-yu-kuo/pen/gOegQKr)        |
|   LinaChen#1796   |         [CodePen](https://codepen.io/LinaChen/pen/zYWNMaM)          |
|    Clara#1275     |         [CodePen](https://codepen.io/bsupixqu/pen/jOzyQva)          |
|    SASIMI#5099    |        [CodePen](https://codepen.io/sashimi1327/pen/RwMGWaG)        |
|     大衛#4869     |         [CodePen](https://codepen.io/exnsrpjc/pen/poLRQxa)          |
| bonnieli1414#4906 | [CodePen](https://codepen.io/bonnieli1414/pen/oNqBQQv?editors=1100) |
|  christina#6185   |        [Codepen](https://codepen.io/chrisc0210/pen/zYWNMmy)         |
|  StellaHsu#2687   | [Codepen](https://codepen.io/stella950114/pen/NWYdEEv?editors=1100) |
|     Sin#0040      |   [Codepen](https://codepen.io/sophmfyt-the-sasster/pen/rNdjQRQ)    |
|     小諾#1866     |          [Codepen](https://codepen.io/noichan/pen/vYRgQML)          |
|  Iris Huang#6727  |          [CodePen](https://codepen.io/ythuang/pen/zYWNMQb)          |
|     Hsiu#8767     |         [CodePen](https://codepen.io/amy-hsiu/pen/MWVJzNq)          |
|     洋蔥#5295     |           [CodePen](https://codepen.io/HSUNA/pen/VwXPqZv)           |
|  PeggyLiao#1552   |  [CodePen](https://codepen.io/PeiJu-Liao/pen/wvmgRwq?editors=1100)  |
|    toshow#5609    |          [CodePen](https://codepen.io/toshow/pen/YzaNdPq)           |
|    Joyce#3790     |  [CodePen](https://codepen.io/joycehuang/pen/oNqBJXX?editors=1100)  |
|    阿翰 #1984     |         [Codepen](https://codepen.io/JohnHan05/pen/qBoRLOE)         |
|     威爾#1694     |          [CodePen](https://codepen.io/WILL_Wu/pen/XWEpomQ)          |
|     jin#4666      |  [Codepen](https://codepen.io/hexschool/pen/NWYWKXP?editors=1100)   |
|     Chi#7605      |          [Codepen](https://codepen.io/YoChi84/pen/xxWgmEx)          |
|    Cliff#4606     |         [Codepen](https://codepen.io/Cliff_hex/pen/gOegGMQ)         |
|     Vera#5592     |          [Codepen](https://codepen.io/skvera/pen/PoRWXbK)           |
|    楓之聲#6945    |         [CodePen](https://codepen.io/sshane258/pen/jOzyXLe)         |
|   Amberhh#2465    |          [CodePen](https://codepen.io/Amberhh/pen/xxWgmpw)          |
|    黃士桓#7654    |      [Codepen](https://codepen.io/shr-huan-huang/pen/YzaNdLV)       |
|    JackC#0411     |          [Codepen](https://codepen.io/key0329/pen/NWYdeML)          |
|   ajhappy#6488    |        [Codepen](https://codepen.io/ajhappy5438/pen/QWmdzxJ)        |
|      peter#0      |  [Codepen](https://codepen.io/JIAN-RONG/pen/zYWNyLG?editors=1100)   |
|  kevin8349#6131   |   [Codepen](https://codepen.io/xlqjezvc-the-encoder/pen/qBoRLwR)    |
|  Clara Cai#7097   |        [Codepen](https://codepen.io/Clara-Snowy/pen/XWEpowm)        |
|    azami#5986     |           [Codepen](https://codepen.io/azami/pen/vYRgbBp)           |
|   Tuhacrt#0008    |          [Codepen](https://codepen.io/Tuhacrt/pen/VwXPgLr)          |
|     威0#6919      |        [Codepen](https://codepen.io/n0918679182/pen/jOzydyN)        |
|     小白#2406     |        [Codepen](https://codepen.io/gracewhite/pen/ExEZGba)         |
|    JarDar#6980    |         [codepen](https://codepen.io/jardarpen/pen/NWYdoJq)         |
|     zera#6060     |        [codepen](https://codepen.io/zera-tseng/pen/JjLExQZ)         |
|    Melon#0380     |         [codepen](https://codepen.io/BalaFang/pen/abYpMdK)          |
|     小樽#3151     |        [codepen](https://codepen.io/tzuen-liou/pen/ExEZMyR)         |
|      Ke#1391      |         [codepen](https://codepen.io/federerke/pen/KKoaEWq)         |
|    鉦勝 #8333     |        [codepen](https://codepen.io/atckmax823/pen/gOegEoP)         |
|   Leo Song#8278   |  [Codepen](https://codepen.io/sunnylaba/pen/zYWNbam?editors=1100)   |
|   WEI_RIO#9342    |          [CodePen](https://codepen.io/wei_wu/pen/PoRWLyG)           |
|     int#7518      |         [Codepen](https://codepen.io/intHuang/pen/NWYdJov)          |
|      痴醉兔       |          [Codepen](https://codepen.io/wei-nie/pen/vYRgPML)          |
|     LINK#1933     |          [Codepen](https://codepen.io/miyayoe/pen/bGvgJGo)          |
|    Henry#7386     |           [Codepen](https://codepen.io/h1nr9/pen/VwXPNZv)           |
|     L0F0#8733     |           [Codepen](https://codepen.io/l0f0/pen/rNdjbJX)            |
|      bakiii       |          [codepen](https://codepen.io/aki168/pen/WNzRWEK)           |
|     雷雷#7844     |        [Codepen](https://codepen.io/lei-yi-jie/pen/MWVJRMg)         |
|     yuyu#6310     |   [Codepen](https://codepen.io/yuyu0905/pen/XWEpwbd?editors=1100)   |
|     群嘉#3943     |   [CodePen](https://codepen.io/efzdamnp-the-lessful/pen/KKoaLNK)    |
|   Jamie Wu#9345   |         [CodePen](https://codepen.io/Wu220103/pen/abYpgLR)          |
|   suihsilan#9485  |   [CodePen](https://codepen.io/suihsilan/pen/zYWNVey?editors=1100) |
|   Shuo#1596  |   [CodePen](https://codepen.io/chiangchungshuo/pen/dymNBBP) |
|Benson#6763| [CodePen](https://codepen.io/kumashow/pen/qBoRzze)|
|leeli#6423| [CodePen](https://codepen.io/leelilee/pen/LYdxwrR?editors=1100)|
|RayChen#6088| [CodePen](https://codepen.io/raychen1996/pen/qBorWEr)|
|YU #0618| [CodePen](https://codepen.io/yoken_/pen/bGvBPdw)|
| Yunei#6323 | [CodePen](https://codepen.io/Yunei/pen/GRxWKEY)|
| GARBO#6659 | [CodePen](https://codepen.io/garbo8130/pen/PoRpYRL)|
| Jason1#2538 | [CodePen](https://codepen.io/jotwxezb-the-encoder/pen/gOemOPY)|
| hungya#0773 | [CodePen](https://codepen.io/hungya777/pen/LYdWYGg)|
|鴨鴨#9822|[CodePen](https://codepen.io/qrvrqvxv-the-selector/pen/OJvpJgM)|
|ssozr#4680|[codepen](https://codepen.io/ssozr/pen/vYRxYWB)|
| 我是泇吟 #5189 | [CodePen](https://codepen.io/kljuqbxs/pen/poLevOY) |
|Sentiments#4883| [codepen](https://codepen.io/Sentiments/pen/gOembQv)
 | yu魚#1330 | [CodePen](https://codepen.io/Yu_yu/pen/ExEWaMP) |
 | Iris Chen#3872 | [CodePen](https://codepen.io/iris-yhc/pen/qBorEvq)                                                |
 |阿基基#2557|[codepen](https://codepen.io/JIJI_GNI/pen/ExEWjWZ)|
 | Yuan962#5897 |[Codepen](https://codepen.io/Jasmine-Liao/pen/poLeJPv)|
 | 狸貓#5863 |[Codepen](https://codepen.io/tanuki320/pen/wvmJaOw)|
  | kancheng#3915 |[Codepen]( https://codepen.io/kancheng/pen/LYdWVwB)|
   |Winnie Wu#5468|[codepen](https://codepen.io/Pooh-Wu/pen/dymvYoQ?editors=1100)|
 | Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/qBorOQG?editors=1100) |
 |  Fanglin#4054 | [CodePen](https://codepen.io/flynn841028/pen/QWmpLaW) |
| 咻蹦#1526 | [CodePen](https://codepen.io/emmasyu/pen/wvmJMLE) |
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/WNzpwwW)|
|YI#0863|[Codepen](https://codepen.io/YI0305/pen/JjLWWBG)|
|QOO#8446|[Codepen](https://codepen.io/QOOQOOQ/pen/ZExeKpG?editors=1100)|
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/WNzpjqv)| 
| LHchien33#6232 |[Codepen](https://codepen.io/lin_chien/pen/mdxWmYv)| 
| 黑白兔#0684|[Codepen](https://codepen.io/johnny329/pen/JjLWyYg)| 
| 小樽#3151|[Codepen](https://codepen.io/tzuen-liou/pen/QWmpqpX)| 
| Vian#7338|[Codepen](https://codepen.io/vianwu31/pen/xxWqJKp?editors=1100)| 
| Pony#6778|[Codepen](https://codepen.io/Pony0303/pen/LYdWBRJ)| 
| 紙飛機#1335|[Codepen](https://codepen.io/paperplanea/pen/bGvqPKe)| 
| mickey#8745|[Codepen](https://codepen.io/weizhetseng/pen/bGvqPxw)|
| Ron Liang#7277|[Codepen](https://codepen.io/ron-go/pen/eYMvwGG)| 
| Yuna Huang#2692|[Codepen](https://codepen.io/Yuna1002/pen/BarWXpR)|
| jeter#8014|[Codepen](https://codepen.io/gi-tai-she/pen/MWVpNxR?editors=1100)|
| EmilyLin#0526|[Codepen](https://codepen.io/c199615/pen/xxWdbYK)|
|Van.CS|[codepen](https://codepen.io/fbacojji-the-selector/pen/xxWdGQr)|
| IreneY #0086 | [codepen](https://codepen.io/HalfPlannedJourney/pen/mdxmEbQ) |
| 瑞瑞#4605 | [codepen](https://codepen.io/tsai-li-ting/pen/jOzmzVW) |
|WEI#0797 | [codepen](https://codepen.io/wei-z/pen/gOeWjXN) |
|NeilLin#3009 | [codepen](https://codepen.io/a0071421/pen/bGvWOWW) |
|得源#8355|[CodePen](https://codepen.io/aglgvsie/pen/eYMWxXJ) |
|choubree#4350|[CodePen](https://codepen.io/BreeChou/pen/ZExeNzg) |
|艾草#4830|[CodePen](https://codepen.io/jmkhsutp/pen/NWYgdpK) |
|yuchenye#6119|[CodePen](https://codepen.io/yuchen/pen/KKoqoQV) |
|Tori#1248|[CodePen](https://codepen.io/FlyTori/pen/MWVodez) |
|艾芮絲#6060|[CodePen](https://codepen.io/wangyingju/pen/XWEgwEr) |
|Nini Chen#5790|[CodePen](https://codepen.io/ninistyle/pen/xxWroYX?editors=1100) |
|肉魚#2149|[CodePen](https://codepen.io/zoechen13/pen/ExEXBJo) |
|hua#9099|[Codepen](https://codepen.io/LHua/pen/YzaxqaN)|
|Deborah#0033|[Codepen](https://codepen.io/deborah-tsai/pen/BardwMx)|
|Cream#3449|[Codepen](https://codepen.io/frxdwbbi-the-sasster/pen/dymzQqm)|
|阿蘇#8531|[Codepen](https://codepen.io/susu3131/pen/ZExJVeJ)|
| Fang#4680 | [Codepen](https://codepen.io/std95174/pen/vYRJwNN?editors=1100)|
|熊二#3824|[CodePen](https://codepen.io/BeckLai/pen/oNqGNLZ)|
| 柏PO #5617| [CodePen](https://codepen.io/apo_1798/pen/XWEebqw)|
| manson許 #2295| [CodePen](https://codepen.io/oupbzfxq-the-scripter/pen/yLKPZgz)|
| Carrie #2750| [CodePen](https://codepen.io/carrie-wang/pen/KKoyjGE)|
| mei#8421| [CodePen](https://codepen.io/Shila-Chen/pen/GRxyRpr)|
| Susie(軒)#6181| [CodePen](https://codepen.io/Codeleaf/pen/BarJoVr)|
| ROKA #4051| [CodePen](https://codepen.io/chengchiaoyi/pen/gOeozpz?editors=1100)|
| rueee #7997| [CodePen](https://codepen.io/Jull-C/pen/mdxXWxL)|
|鎔瑄 #8578| [CodePen](https://codepen.io/barbarayou/pen/KKoQvQO?editors=1100) |
|Jumpye#8601| [CodePen](https://codepen.io/Jumpye/pen/RwMQdBR?editors=1100) |
|sophiee#7015|[codepen](https://codepen.io/sophiee2727/pen/mdxXZvR)
|CJ07#0176|[codepen](https://codepen.io/cjtseng07/pen/XWEExwz)
|Gui#9571|[CodePen](https://codepen.io/guitimliu/pen/GRxGQKv)|
|Bonnie邦妮#7529|[CodePen](https://codepen.io/Calista316/pen/QWmJpGW)|
|Rena#6249|[CodePen](https://codepen.io/aureate0116/pen/GRxwQjg)|
|NathanJames#8120|[CodePen](https://codepen.io/ufo060204/pen/wvmQmKp)|
|RuoAn#7124|[CodePen](https://codepen.io/LiauRuoAn/pen/OJvarRd)|
|skypassion5000#4151|[CodePen](https://codepen.io/skypassion5000/pen/LYdMrdq?editors=1100)|
|KT Hsieh#2861|[CodePen](https://codepen.io/KTHsieh/pen/WNJvdba)