---
# System prepended metadata

title: "\U0001F3C5 Day 16 - flex 完成九宮格排版"
tags: [網頁切版直播班 - 2023 夏季班]

---



請嘗試在「`...`」的地方加上 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 / 答案                      |
|:-:|:----------------:|:-----------------------------------------------------------------:|
|0|派變形金剛#0959|[CodePen](https://codepen.io/chan-chen/pen/dyQeVQr)|
|1|Berlin|[CodePen](https://codepen.io/3qberlin/pen/LYXddgZ)|
|2|cest_jessie|[CodePen](https://codepen.io/itsjessiechen/pen/RwqMMeg)|
|3|Yu|[CodePen](https://codepen.io/yuch3n_chen/pen/NWEYYEB?editors=1100)|
| 4 | kimlemon0720 | [Codepen](https://codepen.io/znohmess-the-builder/pen/oNQqqJz) |
| 5 | Tami | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/dyQmmaN) |
|6|Moreene|[CodePen](https://codepen.io/Moreene/pen/mdQxxvB)|
|7|awei|[CodePen](https://codepen.io/hong-wei/pen/MWzVVxd?editors=1100)|
|8|Hana|[CodePen](https://codepen.io/hananalin/pen/dyQmmLN)|
| 9 | m_m | [CodePen](https://codepen.io/minnn7716/pen/PoxRRvR)  |
| 10 | shawey.1a2b | [Codepen](https://codepen.io/Shawey/pen/zYMWWbx) |
| 11 | townyuan | [Codepen](https://codepen.io/townyuan/pen/eYQMMaO) |
| 12 | 舜仁 | [Codepen](https://codepen.io/randomno/pen/xxQWWoV) |
| 13 | 希月 | [Codepen](https://codepen.io/9001mina/pen/ExOEEzV?editors=1100) |
| 14 | Morning | [Codepen](https://codepen.io/sxzjnkxs-the-styleful/pen/OJavZLE?editors=1100) |
| 15 | 銀光菇 | [Codepen](https://codepen.io/genesynthesis/pen/poQLVzm) |
| 16 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/VwVXXJb) |
| 17 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/oNQqdgZ) |
| 18 | Qi-Hua | [Codepen](https://codepen.io/emily40830/pen/vYQRjEe) |
| 18 | SmallP | [Codepen](https://codepen.io/smallp/pen/eYQMrNm) |
| 20 | homer | [Codepen](https://codepen.io/Buckhorn/pen/ExOELjK)|
| 21 | hannahTW | [Codepen](https://codepen.io/hangineer/pen/QWJmrNP)|
| 22 | Amelia | [Codepen](https://codepen.io/Amelia-chin/pen/dyQmeMz) |
| 23 | murphy1665 | [Codepen](https://codepen.io/icephy/pen/PoxReWd)|
| 24 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/dyQmevV)|
| 25 | .icesam | [Codepen](https://codepen.io/icesam/pen/yLQKjpN)|
| 26 | jacky7035 | [Codepen](https://codepen.io/adens123/pen/KKroRZK)|
| 27 | dodo_6666 | [Codepen](https://codepen.io/MissDouble/pen/ZEmxovQ)|
| 28 | shcopy | [Codepen](https://codepen.io/shcopy/pen/MWzVGYN)|
| 29 | zhu.lin | [Codepen](https://codepen.io/codepenplayer/pen/bGQvMWZ)|
| 30 |yunhsinnnnnnn| [Codepen](https://codepen.io/yun___hsin/pen/bGQvMxP)|
| 31 |kuanju27| [Codepen](https://codepen.io/Eero-Chiao/pen/qBQoYJp)|
| 32 | 莉塔#8500 | [Codepen](https://codepen.io/RitaWeng/pen/OJavZKe?editors=1100)|
| 33 | Martin | [Codepen](https://codepen.io/markyourpage/pen/QWJmxjN)|
| 34 | 小夏 | [Codepen](https://codepen.io/michaelhsia/pen/LYXdrbg?editors=1100)|
| 35 | Paul#7426 | [Codepen](https://codepen.io/paul-1997/pen/gOQeKob)|
| 36 | ting.66 | [Codepen](https://codepen.io/Ting66/pen/jOQzKZB?editors=1100)|
| 37 | ovo.yun | [Codepen](https://codepen.io/yun-the-scripter/pen/JjeLZpe)|
| 38 | ming0712 | [Codepen](https://codepen.io/StevenHuang/pen/OJavEvM)|
| 39 | peggy3169 | [Codepen](https://codepen.io/peggylai/pen/zYMWamJ)|
| 40 | Cura | [Codepen](https://codepen.io/curalin/pen/YzRavRK?editors=1100)|
| 41 | xuan#0808 | [Codepen](https://codepen.io/xuan0915/pen/KKroerX?editors=1100)|
| 42 | hao2485 | [Codepen](https://codepen.io/Seanfeb16/pen/MWzVXLQ)|
| 43 | Brian#7046 | [Codepen](https://codepen.io/PochienTsai/pen/NWEYBPv)|
| 44 | Calvin | [Codepen](https://codepen.io/CalvinChang/pen/bGQvjpr?editors=1100)|
| 45 | .rainielin | [Codepen](https://codepen.io/Yunchian-Lin/pen/NWEYBgy)|
| 46 | Aritan#1931 | [Codepen](https://codepen.io/Aritan/pen/jOQzpxv)|
| 47 | lianne._. | [Codepen](https://codepen.io/Elaina-L/pen/dyQmjeX)|
| 48 | eric0529 | [Codepen](https://codepen.io/delichaomoon/pen/JjeLBVX)|
| 49 | meowmeow | [Codepen](https://codepen.io/snow1224/pen/ZEmxjgg)|
| 50 | 墨墨#4571 | [Codepen](https://codepen.io/momof2e/pen/OJavwaQ) | 
| 51 | stoos_1369 |[Codepen](https://codepen.io/Stooss/pen/LYXdJRy)|
| 52 | ann6212 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/WNYzgGm)|
| 53 | Uli | [Codepen](https://codepen.io/uli1313/pen/abQYapB)|
| 54 | 狸貓 | [Codepen](https://codepen.io/tanuki320/pen/oNQqPdp)|
| 55 | ryan.chou | [Codepen](https://codepen.io/csw8524/pen/JjeLagp)|
| 56 | Atsushi#6888 | [Codepen](https://codepen.io/atsushi-amuro/pen/dyQmgPq)|
| 57 | SKey#9905 | [Codepen](https://codepen.io/Dale-Chien/pen/PoxRymo)|
| 58 | adele6199 | [Codepen](https://codepen.io/codepen-io-winnie/pen/yLQKREz?editors=1100)|
| 59 | ss30304#9213 | [Codepen](https://codepen.io/ss30304/pen/KKroGrv)|
| 60 | ROGER | [Codepen](https://codepen.io/jxyrmcxm-the-scripter/pen/RwqMqoR)|
| 61 | soniawu | [Codepen](https://codepen.io/YUJOU/pen/eYQMQbw?editors=1100)|
| 62 | yuling#1634 | [Codepen](https://codepen.io/igzdflpu/pen/rNQdQbB)|
| 63 | MKL | [Codepen](https://codepen.io/Code-My/pen/qBQogXJ)|
| 64 | hance__kao | [Codepen](https://codepen.io/HanceKao/pen/abQYXyK?editors=1100)|
| 65 | 出事了阿伯#9923 | [Codepen](https://codepen.io/BradpittLai/pen/mdQqpEY)|
| 66 | bf_tsai | [Codepen](https://codepen.io/BF-Tsai/pen/BaGrMxj)|
| 67 | PayRoom | [Codepen](https://codepen.io/water38198/pen/jOQzdew)|
| 68 | Long | [Codepen](https://codepen.io/Loonng/pen/PoxRVgN)|
| 69 | Ann Chou | [Codepen](https://codepen.io/annchou_illu/pen/JjeLxqz)|
| 70 | Randy | [Codepen](https://codepen.io/landy510/pen/eYQMxaK?editors=1100)|
| 71 | Vic_Liou | [Codepen](https://codepen.io/allenliou-java/pen/GRwxeRZ)|
| 72 | lychee_kk | [Codepen](https://codepen.io/kakakala/pen/wvQmOad)|
| 73 | wind | [Codepen](https://codepen.io/wind7y/pen/JjeLzpo)|
| 74 | 棠棠 | [Codepen](https://codepen.io/bobo52400/pen/LYXdvrO)|
| 75| Renee Wang#1437 | [Codepen](https://codepen.io/RENEE-WANG-the-looper/pen/zYMWQwR) |
| 76 | johnchien | [Codepen](https://codepen.io/glqwazid-the-selector/pen/gOQeNPw)|
| 77 | yu.t_liu | [Codepen](https://codepen.io/YuT200053/pen/eYQMwdP)|
| 78 | zona_0.0 | [Codepen](https://codepen.io/Zona-Chen/pen/KKrojox)|
| 79 | 泊岸#3466 | [Codepen](https://codepen.io/qoq77416416/pen/poQLMPM?editors=1100)|
| 80 | hironaka | [Codepen](https://codepen.io/Hironaka0815/pen/bGQMdrV)|
| 81 | Eden.C | [Codepen](https://codepen.io/iseden/pen/mdQLJNJ)|
| 82 | ivy999| [Codepen](https://codepen.io/ivy999/pen/QWJrjjq)|
| 83 | billy_ti | [Codepen](https://codepen.io/Ti-Show/pen/GRwdpWj)|
| 84 | pinyi_9 | [Codepen](https://codepen.io/Wpypy/pen/oNQdjYN)|
| 85 | 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/OJaZMNE) |
| 86 | .manmanlai | [Codepen](https://codepen.io/kikiyang/pen/BaGxjzP?editors=1100) |
| 87 | 依依 | [Codepen](https://codepen.io/Rita-Yang/pen/WNYJrMB?editors=1100)|
| 88 | Tina02#2691 | [Codepen](https://codepen.io/chjitlox-the-bashful/pen/PoxeZey)|
| 89 | ci_ling | [Codepen](https://codepen.io/vseznpoh-the-flexboxer/pen/rNQvxqM)|
| 90 | fanglin.y | [Codepen](https://codepen.io/flynn841028/pen/vYQRRQm) |
| 91 | yuyuyu#1330 | [Codepen](https://codepen.io/yuyu1215/pen/rNQvLVZ) |
| 92 | bbbear#7545 | [Codepen](https://codepen.io/Bearice/pen/ZEmopmW)|
| 93 | 阿賀#3700 | [Codepen](https://codepen.io/sungho/pen/zYMjKVw)|
| 94 | Johnson3669 | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/xxQjqxw)|
| 95 | peggydbc1217| [Codepen](https://codepen.io/peggydbc1217/pen/QWJrvev)|
| 96 | rjjq | [Codepen](https://codepen.io/rjjq/pen/gOQzROP)|
| 97 | 歐陽龍龍#1061 | [Codepen](https://codepen.io/dizzydog-rgb/pen/YzRLQpX)|
| 98 | runweiting | [Codepen](https://codepen.io/weiting14/pen/yLQjXvx)|
| 99 | hsuhsusophie#7338 |[Codepen](https://codepen.io/hsuhsusophie/pen/NWEMagG)|
| 100 | Cosmos#9210 | [Codepen](https://codepen.io/violet7755/pen/JjevOGz)|
| 101 | Lesly1279 | [Codepen](https://codepen.io/LeslyChang/pen/RwqyMEK)|
| 102 | vivianlu_ | [Codepen](https://codepen.io/viviannlu/pen/rNQvKPJ) |
| 103 | Robert.H | [Codepen](https://codepen.io/Robert1205/pen/XWyqBRy)|
| 104 | markchen_ | [Codepen](https://codepen.io/Mark-JJchen/pen/poQVZaK)|
| 105 | MaciHuang#8798 | [Codepen](https://codepen.io/macy1215/pen/MWzGqjd)|
| 106 | shuuu | [Codepen](https://codepen.io/afjrvjzl-the-bashful/pen/NWEMOWQ)|
| 107 | andersonshen | [Codepen](https://codepen.io/luxyenni-the-bold/pen/vYQjVqo)|
| 108 | WA | [Codepen](https://codepen.io/ldddl/pen/VwVxNEr)|
| 109 | sinsaki | [Codepen](https://codepen.io/a8322342/pen/Rwqyzya)|
| 110 | Mylène | [Codepen](https://codepen.io/hamajibashi/pen/JjeZKOV)|
| 111 | NathanJames#8120 | [Codepen](https://codepen.io/ufo060204/pen/mdQKrQx)|
| 112 | 阿富#0389| [Codepen](https://codepen.io/spring40747/pen/oNQyBPN)|
| 113 | dong2328| [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/rNQKjPP)|
| 114 | marskuo| [Codepen](https://codepen.io/MarsKuo/pen/mdQKRYO)|
| 115 | .dtou | [Codepen](https://codepen.io/conlyvrg-the-reactor/pen/NWEzdVX)|
| 116 | yuan2781 | [Codepen](https://codepen.io/ismebir/pen/PoxajBb)|
| 117 | Mattie | [Codepen](https://codepen.io/mattielin/pen/KKrermv)|
| 118 | ning_bobo | [Codepen](https://codepen.io/ninghsu/pen/mdQKaeR?editors=1100)|
| 119 | hebin. | [codepen](https://codepen.io/landyhsiao776/pen/LYXrqoJ)|
| 120 | FanJJ | [codepen](https://codepen.io/yfchenn/pen/KKrBwEY) |
| 121 | .ztion | [Codepen](https://codepen.io/ztion/pen/RwqBpyV) |
| 122 | liam9930 | [Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/wvQxmRo)|
| 123 | cyrus_li | [Codepen](https://codepen.io/likahang/pen/RwqBeQJ)|
| 124 | mm_ieat | [Codepen](https://codepen.io/MINN3/pen/QWJBeWq)|
| 125 | Kimi #9564 | [Codepen](https://codepen.io/kimihu91/pen/GRwyVVR)|
| 126 | Eileen#6454	 | [Codepen](https://codepen.io/Eileen-io/pen/XWyxWwE)|
| 127 | celia9182 | [Codepen](https://codepen.io/celia01/pen/QWJZwBQ)|
| 128 | EY | [Codepen](https://codepen.io/pen/?editors=1100)|
| 129 | jhen_ye | [Codepen](https://codepen.io/su-jhen/pen/RwqeRrY)|
| 130 | yuchou#5749 | [Codepen](https://codepen.io/yu-chou/pen/BaGqOvR?editors=1100)|
| 131 | .zack_P | [Codepen](https://codepen.io/Designer-PH/pen/oNQQYWb?editors=1100)|
| 132 | 圈圈 | [Codepen](https://codepen.io/wjejfczn-the-bold/pen/zYMMPQd?editors=1100)|
| 133 | swalok47716#7332 | [Codepen](https://codepen.io/swalok/pen/poQQGBY)|
| 134 | patrickpie | [Codepen](https://codepen.io/patrickpie/pen/ZEmVmGN)|
| 135 | RX00#5351 | [Codepen](https://codepen.io/llqzknqv-the-styleful/pen/QWJYwmN)|
| 136 | 柚子#3958 | [Codepen](https://codepen.io/as6625998/pen/jOQJpRX)|
| 137 | santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/yLQwmrO) |
| 138 | 阿維#2569 | [Codepen](https://codepen.io/iijojpli-the-looper/pen/QWJRpzP?editors=1100) |
| 139 | JimmyChang | [Codepen](https://codepen.io/JimmyChangWenChi/pen/BaGXRBr) |
|140|KC_8685|[Codepen](https://codepen.io/cathy7411/pen/PoxMxWv)|
|141|ChrisSQR|[Codepen](https://codepen.io/ChrisSQR/pen/LYMWaRb)|
|142|楓|[Codepen](https://codepen.io/maplestartend/pen/vYPYqyX)|


- 快速複製格式：

```markdown!
| 0 | user | [Codepen]()|
```
