---
tags: 網頁切版直播班 - 2021 夏季班
---
# 7/16(五) 每日任務
## 題目

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


請在 Pen Settings 設定 CSS Reset，如圖：


---

HTML

<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

.container {
  width: 1200px;
  margin: 0 auto;
}
.list {
  ...
}
img {
  width: 400px;
  display: block;
}

## 回報流程

1. 將答案寫在 Codepen 並複製 Codepen 連結貼至「回報區」中回報就算完成了喔～解答請參考下方


<!-- 解答：[Codepen 範例](https://codepen.io/AliceChiang/pen/OJXRdXQ)
-->

回報區
---
<!-- 0. Bingbingboom（回報範例，請使用註解回報）
Codepen：https://codepen.io/Bingbingboom/pen/XWMZZqZ
-->

<!-- 1. 焦糖
Codepen: https://codepen.io/yen-kg/pen/vYxjaeo
-->

<!-- 2.孫https://codepen.io/Sunne/pen/zYZbZNx -->

<!-- 3. 蔡明達
Codepen: https://codepen.io/bmzpfyxe/pen/WNpPzyJ
-->

<!-- 4. natsu
Codepen: https://codepen.io/natsu19/pen/dyWNYaJ
-->

<!--5. 阿和
codepen: https://codepen.io/shnny/pen/poPRdLX
-->

<!--6. Winnie
codepen: https://codepen.io/winnie0208/pen/oNWYRpX
-->

<!--7. Jasmin
codepen: https://codepen.io/thejasmin/pen/ZEeKwdO
-->

<!--8. Alpha
codepen: https://codepen.io/alphatero/pen/LYyWqQa
-->

<!--9. Cora
codepen: https://codepen.io/chakrafiregirl/pen/bGWqzLB
-->

<!--10. lumei
codepen: https://codepen.io/l_umei/pen/ExmWVBg
-->

<!-- 11. Tracy曼娟
codepen: https://codepen.io/tracychien-the-encoder/pen/MWmpLQr
-->

<!-- 12：Riley
codepen:https://codepen.io/jjpxbprd/pen/NWjpoyd
-->

<!-- 13.yijun
codepen:
https://codepen.io/sandy3068/pen/oNWZmEO
-->

<!-- 14.Lina Chen
codepen:https://codepen.io/LinaChen/pen/jOmBdKL
-->

<!-- 15.Vic
codepen:https://codepen.io/hsuan333/pen/oNWZmyR
-->
<!-- 16.陳sam
codepen:https://codepen.io/euldpliv/pen/yLbMZqp
-->

<!-- 17.肉鬆
codepen: https://codepen.io/klrkicog/pen/BaRWMOQ
-->

<!--18. RitaHuang
https://codepen.io/Rita-Rossweisse/pen/WNjpPYO
-->

<!-- 19.LiShang
codepen:https://codepen.io/li-shang/pen/ExmWreO
-->

<!-- 20. 林雨樞
https://codepen.io/FISH0701/pen/MWmpLzV
-->

<!-- 21. Phoebe
https://codepen.io/phoebeho/pen/qBmrgQG
-->

<!-- 22. roger
https://codepen.io/rogerchuang/pen/poPeGQp?editors=0100
-->

<!-- 23. Cheng Pei-hsuan
codepen: https://codepen.io/PaCheng/pen/WNjpPWZ
-->

<!-- 24. Xing
codepen: https://codepen.io/xing10/pen/poPeGmL
-->

<!-- 25. Sam li
codepen:https://codepen.io/sam830623/pen/YzVZBmy
----->

<!-- 26. Vivian codepen:https://codepen.io/vivian1223/pen/zYwZeVe
-->

<!--27.黃羽均
codepen：https://codepen.io/azzfgtpo/pen/yLbMwBE
-->

<!-- 28. Gui
https://codepen.io/guitimliu/pen/dyWvroo
-->

<!-- 29.kane0927
https://codepen.io/kane-lin/pen/oNWZVjg
-->

<!-- 30.Jun Chan
codepen：https://codepen.io/chujunchan/pen/gOWmEMm
-->

<!-- 31. Sz
codepen: https://codepen.io/szyln/pen/VwbpRKa-->

<!-- 32. Karen Huang
https://codepen.io/Coding_Snorlax/pen/poPNXWM -->

<!-- 33. YOYO
codepen：https://codepen.io/lumedkle/pen/wvdJOPy
-->

<!-- 34. Gill
codepen：https://codepen.io/Gill-Chin/pen/WNjpmXy
-->

<!-- 35. Joy Cheng
codepen: https://codepen.io/joycheng5432/pen/xxdqBYG
-->
<!-- 36. 大衛
codepen: https://codepen.io/exnsrpjc/pen/eYWvXMw
-->

<!-- 37. youting
codepen: https://codepen.io/youtingluo/pen/MWmpxBd
-->

<!-- 38. 雷古娜
codepen：https://codepen.io/tinahopo/pen/xxdqBaZ -->

<!-- Yen https://codepen.io/Hoyi/pen/bGWqZzx -->

<!-- 40. Archie
codepen: https://codepen.io/WuChengHua/pen/MWmpxRN
-->

<!-- 41. Jean
codepen: https://codepen.io/jean-liu/pen/JjNWVPb
-->
<!--42 icy
codepen:https://codepen.io/ccsbjzze-the-sasster/pen/ExmWMzP
-->

<!--43 Summer.H
codepen:https://codepen.io/wan-chine/full/JjNWVdE
-->

<!--44 WilsonHan
codepen:https://codepen.io/wi0821/pen/dyWvLvJ
-->

<!--45 curry
codepen:https://codepen.io/Ted19851223/pen/dyWvLWJ
-->

<!--45. yellamoon 巫樾
codepen:https://codepen.io/pwbzvqja/pen/JjNWVBO
-->

<!--47. Cate Chang
codepen:https://codepen.io/tutz/pen/bGWqJmb
-->

<!-- 48.Scarlett史嘉
codepen:https://codepen.io/qoxttdjg-the-encoder/pen/zYwZbxb -->

<!-- 49. Elaine Liu
codepen:https://codepen.io/elaine7598/pen/YzVZMmd
-->

<!-- 50. huanan
codepen:https://codepen.io/hua_nan/pen/JjNWqGB
-->

<!-- 51. 阿熊
codepen: https://codepen.io/hsiungchi/pen/Pompvzo -->

<!-- 52. 袁祥恩
codepen:
https://codepen.io/ovfxsavp-the-bashful/pen/OJmpYbV?editors=0100 -->

<!-- 53. LTL
codepen : https://codepen.io/ltlin93/full/YzVZbxo -->

<!-- 54. KK
codepen : https://codepen.io/potatokaka/pen/rNmygGd?editors=1100 -->

<!-- 55. peter.chgen
codepen: https://codepen.io/JIAN-RONG/pen/yLbMWpz?editors=1100
-->

<!-- 56.PHIL
codepen: https://codepen.io/ctkeftjp-the-animator/pen/wvdJbyz
-->

<!-- 57. Ruby Chiang
Codepen: https://codepen.io/rubyyl0701/pen/QWvpRrv
-->

<!-- 58. Tansy
codepan: https://codepen.io/subarashii-huch09/pen/wvdJbQg?editors=1100
-->

<!-- 59.harold
codepen: https://codepen.io/YuWin0805/pen/JjNWzgb
-->

<!-- 60. hellocrab
https://codepen.io/hellocrab/pen/yLbMWrK
-->

<!-- 61.群嘉
https://codepen.io/efzdamnp-the-lessful/pen/rNmyEMR?editors=1100
-->

<!-- 62.anna
https://codepen.io/AliceChiang/pen/OJXRdXQ
-->

<!-- 63. jimmyFang
https://codepen.io/pohxiqqo/pen/WNjpqqL
-->

<!-- 64.Fleur
https://codepen.io/swwlee/pen/rNmWZPv
-->

<!-- 64.Ryan
https://codepen.io/RyanYD/pen/XWRMvMK
-->

<!-- 65. Tina Yen
https://codepen.io/tlorfrnl-the-typescripter/pen/dyWvxRJ
-->

<!-- 66. 童筱涵
https://codepen.io/hsiaohan/pen/OJmpKxd?editors=1100
-->

<!-- 67.阿瓜
https://codepen.io/hoick/pen/XWRMvVN -->

<!-- 68. Nate Lu
https://codepen.io/nate12/pen/JjNWgqL
-->

<!-- 69. Shani
https://codepen.io/ShaniMa/pen/wvddwdM -->

<!-- 69. YuriT
CodePen:
https://codepen.io/wenfisht/pen/bGWWbyW?editors=1100 -->

<!-- 70. 沈依蓉
https://codepen.io/lily-oa/pen/eYWWYYP
-->

<!-- 71.Jameskrauser
https://codepen.io/jameskrauser/pen/LYyyYGY?editors=1100
-->

<!--72.Peggy Tsai
https://codepen.io/pei-chi-tsai/pen/bGWWGWa -->

<!--73.Ariel
https://codepen.io/Arielariel/pen/dyWWyVM?editors=1100 -->

<!--74. Tori
https://codepen.io/hayen/pen/KKmWXGZ?editors=1100 -->

<!-- 75. ZY Hsu
https://codepen.io/zihyin/full/qBmmdby -->

<!-- 76. Irene Wang
codepen: https://codepen.io/irene-wang-the-looper/pen/ZEKKGKX
-->

<!-- 77.粘勝凱
codepen:https://codepen.io/szykttdy/pen/VwbbLWN
-->

<!-- 78.Katie Zhao
https://codepen.io/katiezhao/pen/PommPZp
-->

<!-- 79.Jerry Yen
https://codepen.io/JerryYen/pen/abWWvNr
-->

<!-- 80. ZOE WU
https://codepen.io/Zoechiueh/pen/YzVVyqw?editors=1100-->

<!-- 81.黃士桓
https://codepen.io/shr-huan-huang/pen/rNmmOmR
df,fxww -->
<!-- 82.Joanna chang
https://codepen.io/polilu1985/pen/XWRRmgw
-->

<!-- 83.吐司
https://codepen.io/danielle-zhang/pen/WNjjxbZ
-->

<!-- 84.shanglin
https://codepen.io/rmovuagr-the-selector/pen/mdmmOKd?editors=1100
-->

<!-- 85.Erin Huang
https://codepen.io/ErinHuang/pen/Exmmwab
-->

<!-- 86.stepha
https://codepen.io/w1112yb/pen/rNmmGNm
-->

<!-- 87.Joe Kuo
https://codepen.io/alertislow/pen/LYyyeMe
-->

<!-- 88 axlrock1021
https://codepen.io/lnjbmmxo/pen/RwVVJdw
-->

<!-- 89.周周
codepen: https://codepen.io/jhoujhou-the-decoder/pen/WNjjKvE -->

<!-- 90.Sylvia-H
codepen: https://codepen.io/Cosmosheart/pen/oNWWaqJ?editors=1100 -->

<!-- 91.黃小瑄
codepen:https://codepen.io/5quvgp2z/pen/QWvgWLg -->

<!-- 92.kevinhes
https://codepen.io/dwpwdpad/pen/NWjgpJV
-->

<!-- 93.Meng
https://codepen.io/MGHN/pen/KKmNjoO
-->

<!-- 94.Oober
https://codepen.io/xtsjrjdv/pen/yLbXqzK
-->

<!-- 95.Jim Hwang
https://codepen.io/jimh1129/pen/VwbWEzG
-->

<!-- 96. Jeff H - https://hackmd.io/@jeff14994/H10xDlBq_/https%3A%2F%2Fhackmd.io%2F%40jeff14994%2FS1gzIsl6u%2F%252FFF7y1GkvRZG9GoZCOdFZ0A-->

<!-- 97. KinHei Shing
Codepen: https://codepen.io/kinhei-shing/pen/YzVxKJd
-->

<!-- 98. Yao Lin
Codepen: https://codepen.io/yaoyaoiii/pen/rNmzNQo
-->

<!-- 99. Freya
codepen:
https://codepen.io/iyowai/pen/LYyjZEX?editors=1100
-->

<!-- 100. Una(點子數位)
codepen:
https://codepen.io/xbsapbas-the-vuer/pen/OJmjWyV?editors=1100
-->

<!-- 101. Ning
codepen:
https://codepen.io/fangninglin/pen/NWjvgrR -->
<!-- 102. ellie
https://codepen.io/hsu-yu/pen/OJmjvZR
-->

<!-- 103. 三隻小貓
codepen: https://codepen.io/bagelover/pen/GRmMJWB?editors=1100
-->

<!-- 104. 陳品宏
codepen:
https://codepen.io/wtka/pen/wvdrrrN
-->

<!-- 105. Alberto
https://codepen.io/AlbertoLL/pen/dyWVmQE
-->

<!-- 106. sarah
codepen:
https://codepen.io/sarah-wang/pen/jOmGQOb
-->

<!-- 107. Zaii Hsu
codepen:https://codepen.io/ivy2846357/pen/vYmJGBR -->

<!-- 108. Yurie
codepen:https://codepen.io/_u_jung/pen/mdmqLwV -->

<!-- 109. 魚魚
codepen:
https://codepen.io/YuYu_29/pen/mdmppQP
-->

<!-- 110. Min Chun Tsai
codepen:
https://codepen.io/Tsai0926/pen/OJmzvaK
-->

<!-- 111. Benson
codepen:
https://codepen.io/polarBear712/pen/YzVaXeq
-->

<!-- 112. irene
Codepen：https://codepen.io/lohas1107/pen/XWRqdVx?editors=1100
-->

<!-- 113. WA
https://codepen.io/ldddl/pen/ExmRBWM
-->

<!-- 114. Jessie Cheng
https://codepen.io/JessieMosbi/pen/vYmroXe?editors=1100
-->

<!-- 115. Newman
https://codepen.io/newmankz/pen/GRmBaEz
-->

<!-- 116.Page
https://codepen.io/kanawin821/pen/gOWBVmL
-->

<!-- 117.聿凌
https://codepen.io/igzdflpu/pen/jOmQZYR?editors=1100
-->

<!-- 118. Eric-小偉哥
https://codepen.io/ericLoveDesign/pen/eYWbVbY
-->

<!-- 119. rose
https://codepen.io/roseling30/pen/oNWrjvR

<!-- 120. twoz
https://codepen.io/twoz/pen/rNmEoPe?editors=1100
-->

<!-- 121. AKI
https://codepen.io/akichen27/pen/rNwVaXQ
-->

<!-- 122. Keep
https://codepen.io/keep-/pen/ExXgyRM
-->

<!-- 123. Pocky
https://codepen.io/linlin_web/pen/ExvoBQj?editors=1100
-->