--- tags: 公益程式體驗營 - 2022 --- # 🏅 5/26 (四) 每日切版任務 - Flex 與 RWD 練習 ## 題目 * 用 Codepen 練習以下畫面，提供 Desktop 寬度尺寸為 1000px ，其餘相關尺寸、間距請自行設計，只要跟畫面比例差不多即可，需做 RWD( Desktop -> 768px -> 576px ): >**顏色資訊** >![](https://i.imgur.com/roBsYWj.png) >**Deskto** ![](https://i.imgur.com/rXA9ANs.png) >**768px** ![](https://i.imgur.com/uEBPx4S.png) >**576px** ![](https://i.imgur.com/uqLZhgx.png) <!-- ans: [RWD02](https://codepen.io/DoLucky/pen/eYVWEgv?editors=1100) --> --- ## 回報流程 1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報 （也可以將答案直接貼至「回報區」） ![](https://i.imgur.com/vftL5i0.png) <!-- 解答： --> 回報區 --- <!-- 1. Bruno Yu Codepen: https://codepen.io/bruno-yu/pen/WNMXKRo --> <!-- 2. yunyun Codepen: https://codepen.io/yun_yunni/pen/gOvXjmb --> <!-- 3.IreneLee codepen:https://codepen.io/ntjtcxpt-the-animator/pen/RwQjBYP --> <!-- 4. su#7798 codepen: https://codepen.io/wc-su/pen/ZErajVj --> <!-- 5. 楓之聲#6945 codepen: https://codepen.io/sshane258/pen/GRQOXLQ --> <!-- 6. Peng https://codepen.io/peng-027/pen/xxYPygd?editors=1100 --> <!-- 7.Noy https://codepen.io/MochiCodingPen/pen/oNEoayd --> <!-- 8.RJRS#9430 https://codepen.io/RJRS/pen/gOvXBWQ --> <!--9.Chaco #2993 https://codepen.io/chaco-wang/pen/mdXqzwG?editors=0110 --> <!-- 10. Tuhacrt#0008 Codepen: https://codepen.io/Tuhacrt/pen/wvyPYPb?editors=1100 --> <!-- 11.Mitour#0672 https://codepen.io/mitour/pen/ExQbdvW --> <!-- 12. Cheng-Yu#1813 codepen: https://codepen.io/ball77111/pen/NWywEBj --> <!-- 13. Cliff https://codepen.io/Cliff_hex/pen/LYQOXNX --> <!-- 14.眠瀾#8857 CodePen: https://codepen.io/laron9486/pen/MWQOPNp --> <!-- 15. Greta#0837 Codepen: https://codepen.io/gretali/pen/ExQbOqM --> <!-- 16. Hao#2485 https://codepen.io/hao216/pen/dydZzWp --> <!-- 17.LHchien https://codepen.io/lin_chien/pen/vYdWvyX?editors=1100 --> <!-- 18. Chaoci#2460 Codepen: https://codepen.io/gmailchao/pen/OJQOoKw?editors=1100 --> <!-- 19.Joyce https://codepen.io/joycehuang/pen/gOvXqbK?editors=1100 --> <!-- 20. shujhen#7734 Codepen：https://codepen.io/shujhen/pen/mdXqvoo --> <!-- 21. How#5806 Codepen：https://codepen.io/howtobefine/pen/gOvXEKP --> <!-- 22. SASIMI#5099 Codepen： https://codepen.io/sashimi1327/pen/jOZaJgZ --> <!-- 23. 雷雷#7844 https://codepen.io/lei-yi-jie/pen/yLvPrLE?editors=1100 --> <!-- 24. #EVC1876 Codepen: https://codepen.io/elvi-chuang/pen/zYRPeLz?editors=1100 --> <!-- 25. lyle#8123 Codepen: https://codepen.io/tomys/pen/eYVeaZp --> <!-- 26. Jason Chen Codepen: https://codepen.io/jason60810/pen/qBxVwRE --> <!-- 27. ajhappy#6488 Codepen:https://codepen.io/ajhappy5438/pen/KKQyjmm --> <!-- 28. Chi Codepen:　https://codepen.io/YoChi84/pen/ExQbzJb --> <!-- 29. hw#0715 https://codepen.io/Lhwei/pen/bGLYPQq --> <!--30. 黑松胖#4836 https://codepen.io/yi-chien-hsieh/pen/MWQOqWq?editors=1100 --> <!--31. Stanley https://codepen.io/sean_1215/pen/BaYmEWm --> <!--32. 鉦勝 https://codepen.io/atckmax823/pen/QWQaLXy --> <!--33. Muse#9741 Codepen:https://codepen.io/mu24/pen/gOvXBOK --> <!--34. amy芳#1385 Codepen:https://codepen.io/amy-chieng/pen/OJQzJWV --> <!--35. bonnieli1414#4906 Codepen:https://codepen.io/bonnieli1414/pen/GRQyZVL --> <!--36. Ryan Lu#3642 Codepen:https://codepen.io/ryanlu1125/pen/abqEOgE?editors=0100 --> <!--37. JessieCho Codepen:https://codepen.io/jessieCho/pen/vYdpXMZ --> <!--38. 小不點#1793 Codepen:https://codepen.io/fwmfmgkx-the-flexboxer/pen/qBxpRMg --> <!--39. JustinLiu Codepen: https://codepen.io/justin0227/pen/rNJYbmb?editors=1100 --> <!--40. Knn#0492 Codepen: https://codepen.io/Knn_84/pen/OJQzgPK --> <!--41. Tori Codepen: https://codepen.io/FlyTori/pen/PoQEmQx?editors=1100 --> <!--42. xuan#0808 Codepen: https://codepen.io/xuan0915/pen/eYVyWjd?editors=1100 --> <!--43. yuyu#6310 Codepen: https://codepen.io/yuyu0905/pen/gOvoxxW --> <!-- 44. JackC Codepen: https://codepen.io/key0329/pen/PoQEOOw --> <!-- 45. deveryone#8090 https://codepen.io/raycheng/pen/bGLaMmv --> <!-- 46. mei#8421 https://codepen.io/Shila-Chen/pen/WNMdaNa --> <!-- 46. skypassion5000#4151 https://codepen.io/skypassion5000/pen/oNEpPzN?editors=1100 --> <!-- 47 J_u_d_y#5993 https://codepen.io/J_u_d_y/pen/poapxZv --> <!-- 48 Arista https://codepen.io/arista-hsieh/pen/xxYpejK --> <!-- 49. Vicky Chang#8846 Codepen: https://codepen.io/cychang/pen/yLvpmYv?editors=1100 --> <!-- 50. danny123 codepen: https://codepen.io/binlandz123/pen/PoQQYey?editors=1100 --> <!-- 51. Lina Chen Codepen: https://codepen.io/LinaChen/pen/OJQQLNZ --> <!-- 52. Charlotte Lee Codepen: https://codepen.io/charlotte-lee/pen/gOvvOWN?editors=0100 --> <!-- 53. Josh Chen#4552 Codepen: https://codepen.io/hiphop825/pen/dyddYYK?editors=1100 --> <!-- 54. Katie Codepen: https://codepen.io/Katie24/pen/NWyyxqp --> <!-- 55. 花禮湖燒#7359 Codepen: https://codepen.io/lai-pei/pen/vYddGoa --> <!-- 56. Vera#5592 Codepen: https://codepen.io/skvera/pen/mdXXyEV --> <!-- 57. 小天#7177 https://codepen.io/linyujing/pen/rNJJYQp?editors=0100 --> <!-- 58.RayChen#6088 https://codepen.io/raychen1996/pen/zYRWGLv --> <!--59. Ayre#0016 codepen:https://codepen.io/yichunlin09/pen/OJQvVaw?editors=1100 --> <!--60. 家洋#6999 https://codepen.io/yang940648/pen/JjpLyjB --> <!--61. Erica Chen#6929 https://codepen.io/ericachen/pen/rNJdKRa?editors=1100 --> <!--61. hsiuhsiu https://codepen.io/hsiuhsiu/pen/poaVXZo?editors=1100 --> <!--62. CloThEs https://codepen.io/bogwdnxx-the-sans/pen/XWZEaaB --> <!--63. Jamie https://codepen.io/Wu220103/pen/WNMMzve --> <!--64. ling chang#1024 https://codepen.io/ling-chang/pen/ExQRRNO?editors=1100 --> <!-- 65. 白狐 Codepen：https://codepen.io/baihu7851/pen/BaYVPdV --> <!-- 66. Cynthia1111 Codepen：https://codepen.io/Cynthia1111/pen/wvyxzVK?editors=1100 --> <!-- 67. Jumpye#8601 Codepen：https://codepen.io/Jumpye/pen/poaOwxq?editors=1100 --> <!--68. TunacanBoy#2206 https://codepen.io/JamesDesign/pen/GRQxQEv --> <!--69.yuling https://codepen.io/igzdflpu/pen/zYRRLZz--> <!-- 70. andersonshen#4675 Codepen：https://codepen.io/luxyenni-the-bold/pen/bGLZRrX --> <!-- 71. WeiKai#1867 Codepen: https://codepen.io/beginneraboutlife116/pen/ZErNrWo -->