--- tags: 公益程式體驗營 - 2022 --- # 🏅 5/11(三) 每日切版任務 - flex 練習二 ## 問題 用 Codepen 練習 flex 語法切版： ![](https://i.imgur.com/9HxP9aq.png) ![](https://i.imgur.com/Uw3eV9V.png) 文字提供: 最新資訊 促銷活動 休閒鞋類 工作鞋類 兒童鞋類 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti quis, vero quaerat debitis ea omnis ratione? Voluptatem, quibusdam dolor reprehenderit recusandae minima voluptates accusantium asperiores molestias? Saepe eveniet fugiat asperiores. Tempora assumenda omnis harum explicabo. Ipsa, tempora sequi! Aliquam excepturi id illo perferendis fuga eligendi doloremque, praesentium recusandae minus quam et odio tempore sequi qui? Facere quasi ipsum corrupti culpa. 上一頁 下一頁 <!-- ans: [flex02](https://codepen.io/DoLucky/pen/ExQjMYq?editors=1100) --> --- ## 回報流程 1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報 （也可以將答案直接貼至「回報區」） ![](https://i.imgur.com/vftL5i0.png) <!-- 解答： --> 回報區 --- <!-- 1. yunyun 答案： Codepen：https://codepen.io/yun_yunni/pen/QWQEdbG --> <!-- 2. Bruno Yu 答案： Codepen：u --> <!-- 3. CloThEs 答案： Codepen：https://codepen.io/bogwdnxx-the-sans/pen/MWQebRp --> <!-- 4. Chi Codepen: https://codepen.io/YoChi84/pen/QWQEdNd --> <!-- 5. JackC Codepen: https://codepen.io/key0329/pen/abqZBeG --> <!-- 6.ozawa#8815 https://codepen.io/PIN-HSIN/pen/KKQMamv?editors=1100 --> <!-- 7. Art https://codepen.io/ss97202tw/pen/KKQMaGQ?editors=1100 --> <!-- 8. 翁來 https://codepen.io/wguo8320/pen/oNELZjj --> <!-- 9. bonnieli1414#4906 https://codepen.io/bonnieli1414/pen/LYQZWpV?editors=1100 --> <!-- 10.君Jyun#0147 https://codepen.io/Okaybeok/pen/bGLeqpL --> <!-- 11. Jia-Hong Chen#3863 https://codepen.io/iloveleon19/pen/jOZryva --> <!-- 12. Stanley#3825 https://codepen.io/sean_1215/pen/jOZrBbK?editors=1100 --> <!-- 13. yuyu#6310 https://codepen.io/yuyu0905/pen/jOZrygz?editors=1100 --> <!-- 14. su#7798 codepen: https://codepen.io/wc-su/pen/MWQepjL --> <!-- 15. Eric.S Codepen：https://codepen.io/Eric_Shen/pen/xxYOqJV --> <!-- 16. Chaoci#2460 Codepen: https://codepen.io/gmailchao/pen/ZErOLax --> <!-- 17. Katie Codepen: https://codepen.io/Katie24/pen/NWyrpKX --> <!-- 18. Jason999220 Codepen: https://codepen.io/Jason999220/pen/rNJLyPV?editors=1100 --> <!-- 19. Kiwi #9804 Codepen: https://codepen.io/kiwi1113/pen/vYdKxZ --> <!-- 20.Noy https://codepen.io/MochiCodingPen/pen/wvyWJxx --> <!-- 21.Josh Chen#4552 https://codepen.io/hiphop825/pen/dydXvQW --> <!-- 22. Leo Song https://codepen.io/sunnylaba/pen/wvyWJem?editors=1100 --> <!--23. TunacanBoy#2206 https://codepen.io/JamesDesign/pen/ZErOLNq --> <!--23. Lemon https://codepen.io/shumhoyin/pen/qBxNrWB --> <!-- 24. 阿基基 https://codepen.io/JIJI_GNI/pen/abqZpxr --> <!-- 25. Peng https://codepen.io/peng-027/pen/MWQemya --> <!-- 26. 安安你好你是誰#7416 https://codepen.io/leave3310-the-looper/pen/yLvJbJN --> <!-- 27. Sweet https://codepen.io/Pei-Ying/pen/gOvMmeo --> <!-- 28. 楓之聲#6945 https://codepen.io/sshane258/pen/VwQjprP --> <!-- 29. Jenny_ https://codepen.io/Jenny_000/pen/poabRwW?editors=1100 --> <!-- 30. Cheng-Yu#1813 https://codepen.io/ball77111/pen/YzeWVQv --> <!-- 31. Erica Chen#6929 https://codepen.io/ericachen/pen/xxYOdKg --> <!-- 32. Jason Chen https://codepen.io/jason60810/pen/OJQXpgz --> <!-- 33. Cliff https://codepen.io/Cliff_hex/pen/dydXWMJ --> <!-- 34. RJRS#9430 https://codepen.io/RJRS/pen/oNELBWO --> <!-- 35. Vera#5592 https://codepen.io/skvera/pen/wvyWdqb --> <!-- 36.IreneLee codepen:https://codepen.io/ntjtcxpt-the-animator/pen/zYRBwLd --> <!-- 37. codepen: EG#7172 https://codepen.io/paneg-jpeg/pen/rNJLmNx --> <!-- 38. codepen: han#9437 https://codepen.io/qnrxylcw-the-reactor/pen/RwQRVzO --> <!-- 39. codepen: NaRa#7954 https://codepen.io/chou-nara/pen/LYQZyzQ --> <!-- 40. Joyce#3790 Codepen: https://codepen.io/joycehuang/pen/OJQXmvY?editors=1100 --> <!-- 41. 眠瀾#8857 CodePen: https://codepen.io/laron9486/pen/eYVzWXR --> <!-- 42. Yuhung#1391 Codepen: https://codepen.io/Yu__hung/pen/vYdKZgo?editors=0110 --> <!-- 43. #EVC1876 Codepen: https://codepen.io/elvi-chuang/pen/bGLeWyd?editors=1100 --> <!-- 44. Bao#4997 Codepen: https://codepen.io/baoh/pen/vYdGzZZ?editors=1100 --> <!-- 45. Rex Chu Codepen: https://codepen.io/rex_chu/pen/abqZJPN --> <!-- 46. Muse#9741 Codepen: https://codepen.io/mu24/pen/eYVzRWM --> <!-- 47. Murmurline#6969 Codepen: https://codepen.io/murmurline/pen/oNELwrg --> <!-- 48. andersonshen#4675 Codepen: https://codepen.io/luxyenni-the-bold/pen/LYQZLaP --> <!-- 49. ㄚ華 codepen: https://codepen.io/jzkonzat-the-typescripter/pen/WNMxOpR --> <!-- 50. Knn#0492 codepen: https://codepen.io/Knn_84/pen/dydXVGZ --> <!-- 51. hw#0715 https://codepen.io/Lhwei/pen/KKQMvBE --> <!--52. Vicky Chang#8846 Codepen: https://codepen.io/cychang/pen/gOvMxbm?editors=1100 --> <!--53. Greta#0837 Codepen: https://codepen.io/gretali/pen/PoQzJqd --> <!-- 54. Tuhacrt#0008 Codepen: https://codepen.io/Tuhacrt/pen/QWQEMMV?editors=1100 --> <!-- 55. LHchien https://codepen.io/lin_chien/pen/yLvJbaN --> <!-- 56. AllenLi#6756 CodePen:https://codepen.io/knsybndf-the-animator/pen/qBxNjdJ?editors=1111 --> <!-- 57. RyanLu#3642 CodePen:https://codepen.io/ryanlu1125/pen/MWQevmx?editors=1100--> <!-- 58. Cynthia1111 CodePen:https://codepen.io/Cynthia1111/pen/xxYOXbg --> <!-- 59. Hao#2485 Codepen:https://codepen.io/hao216/pen/ExQywZW --> <!-- 60. kuo Codepen:https://codepen.io/sunny-sun/pen/wvyWeEJ?editors=0100 --> <!-- 61. deveryone#8090 codepen:https://codepen.io/raycheng/pen/xxYOPVJ?editors=1100 --> <!-- 62. 小不點#1793 codepen:https://codepen.io/fwmfmgkx-the-flexboxer/pen/JjpKMPg --> <!-- 63. 雷雷#7844 codepen:https://codepen.io/lei-yi-jie/pen/oNELpBb --> <!-- 64. hsiuhsiu codepen:https://codepen.io/hsiuhsiu/pen/eYVzyMq --> <!-- 65. JustinLiu Codepen: https://codepen.io/justin0227/pen/yLvJpqr?editors=1100 --> <!--66 Tsuei https://codepen.io/AlbertoLL/pen/dydXdKK --> <!--67 lyle#8123 https://codepen.io/tomys/pen/MWQeQZb --> <!-- 68. Arvin#6347 Codepen:https://codepen.io/family929317/pen/abqZLXE?editors=1100 <!--69. SASIMI #5099 CodePen: https://codepen.io/sashimi1327/pen/qBxNoYw --> <!--69. 黑松胖 #4836 CodePen: https://codepen.io/yi-chien-hsieh/pen/ExQyXjL?editors=1100 --> <!--70. Nina泥#1422 cpdepen: https://codepen.io/xiangqi09020/pen/qBxNoRQ?editors=1100 --> <!--71. Tori#1287 cpdepen: https://codepen.io/FlyTori/pen/JjpKvvG --> <!--72. Carrie#2750 cpdepen:https://codepen.io/carrie-wang/pen/qBxNYYZ --> <!--72. RayChen#6088 cpdepen:https://codepen.io/raychen1996/pen/NWyrBrr --> <!--73. ChaoChao https://codepen.io/EmiiilyJ/pen/dydXejN --> <!-- 74. Mitour#0672 codepen: https://codepen.io/mitour/pen/GRQqdJr --> <!-- 75. shujhen#7734 Codepen：https://codepen.io/shujhen/pen/zYRBwKo --> <!-- 76. 小天#7177 https://codepen.io/linyujing/pen/MWQeBQr --> <!-- 77. LCC#9012 codepen:https://codepen.io/pamelaxchun/pen/wvyWXgO --> <!-- 78. muzz#0345 https://codepen.io/yunnnz/pen/GRQqBpV--> <!-- 79. Lina Chen https://codepen.io/LinaChen/pen/QWQEOXa --> <!-- 80. Dun Dun#9857 Codepen：https://codepen.io/dundun/pen/dydXjpa --> <!-- 81. WeiKai codepen: https://codepen.io/beginneraboutlife116/pen/poabZxp --> <!-- 82. Tin#7559 https://codepen.io/tinchen/pen/BaYzwme --> <!-- 82. WilliamChou#7375 https://codepen.io/williampo78/pen/zYRBLPL --> <!--84. Ayre #0016 Codepen: https://codepen.io/yichunlin09/pen/XWZKBqB?editors=1100 --> <!--85. HiyukiOuO # 8072 codepen:https://codepen.io/Befei/pen/PoQzadg?editors=1100 --> <!--86. 鉦勝 # 8333 codepen:https://codepen.io/Befei/pen/PoQzadg?editors=1100 --> <!-- 87 omega #7047 codepen: https://codepen.io/waittinghsu/pen/ZErOood --> <!-- 87 邊邊#2293 codepen: https://codepen.io/WinnieTsao/pen/wvyWxdG?editors=1100 --> <!-- 88. will0708#7730 https://codepen.io/ncrdpepc-the-lessful/pen/zYRBzYR?editors=1100 --> <!-- 89. Triple https://codepen.io/riku30/pen/GRQqXME --> <!-- 90. rubyruby https://codepen.io/Ruby0831/pen/bGLeQjg --> <!-- 91. 隔壁小王 Codepen: https://codepen.io/stevetanus/pen/poabVXX --> <!-- 92. Chaco #2993 https://codepen.io/chaco-wang/pen/eYVzQRV --> <!-- 93. Raymond Lam#0344 https://codepen.io/manshun-lam/pen/YzeWObx --> <!-- 94.yuling https://codepen.io/igzdflpu/pen/poabxOy --> <!-- 95. Alphacostankion#8475 Codepen: https://codepen.io/alphapolo/pen/wvyWQBa --> <!-- 96.Mylène Codepen: https://codepen.io/hamajibashi/pen/PoQzXeE --> <!-- 97.Meri#0052 Codepen: https://codepen.io/Bboy_Meri/pen/poabGyz?editors=1100 --> <!-- 97.Adif https://codepen.io/Adif/pen/mdXEGRW?editors=1100 --> <!--99. 菟小歆#2154 Codepen:https://codepen.io/catmoon1017/pen/qBxNQYv --> <!-- 100. yen#5757 Codepen https://codepen.io/TZU-HUANG-YEN/pen/vYdKQPO --> <!-- 101 Patti Chiu Patti#7774 Codepen: https://codepen.io/peiru-qiu/pen/WNMxWYa?editors=1000 --> <!-- 102. 白狐 Codepen: https://codepen.io/baihu7851/pen/OJQRLoG --> <!-- 103. Jenny_ Codepen: https://codepen.io/Jenny_000/pen/XWZjWeE?editors=1100 --> <!-- 104. EllieLo #9809 Codepen: https://codepen.io/ellie-lo/pen/ExQgaxM --> <!-- 105. Easton#3863 Codepen: https://codepen.io/EastonIsCodingNow/pen/zYRKvbm --> <!-- 106. How#5806 Codepen: https://codepen.io/howtobefine/pen/YzeGwqw --> <!-- 107. Nini Chen#5790 Codepen: https://codepen.io/ninistyle/pen/abqmvvq?editors=1100 --> <!-- 108. Nini 花禮湖燒#7359 Codepen: https://codepen.io/lai-pei/pen/XWZjXXO --> <!-- 109. xuan#0808 Codepen: https://codepen.io/xuan0915/pen/VwQKeZY?editors=1100 --> <!-- 110. zzuhann#2786 codepen: https://codepen.io/zzuhann/pen/GRQjZLz --> <!-- 110. Lyndon.Su#6018 codepen: https://codepen.io/LyndonSu/pen/vYdXyWj --> <!-- 111. yoyo123456#0577 codepen: https://codepen.io/hungyoyo/pen/yLvaamW?editors=1100 --> <!-- 112. ajhappy#6488 codepen: https://codepen.io/ajhappy5438/pen/rNJMWMO --> <!-- 113.Yi#2702 https://codepen.io/yic1823/pen/MWQevBM --> <!-- 114.Arista https://codepen.io/arista-hsieh/pen/abqmwJG --> <!-- 115.黑白兔#0684 https://codepen.io/johnny329/pen/dydpWWV --> <!-- 116.amy芳#1385 https://codepen.io/amy-chieng/pen/GRQjmeP --> <!-- 117.Jie Du https://codepen.io/qgqonost-the-flexboxer/pen/xxYEwLa --> <!-- 118.J_u_d_y#5993 https://codepen.io/J_u_d_y/pen/VwQKzxj?editors=1100 --> <!-- Jill#5577 CodePen: https://codepen.io/Jillkate/pen/LYQRXPd --> <!-- 119.Charlotte Lee https://codepen.io/charlotte-lee/pen/dydpajJ?editors=1100 --> <!-- 120. Susan#5854 https://codepen.io/Susan8402/pen/abqmMgQ?editors=1100 --> <!--121. 家洋#6999 Codepen:https://codepen.io/yang940648/pen/rNJWaJP --> <!--122. ling chang#1024 Codepen:https://codepen.io/ling-chang/pen/BaYzGEW --> <!--123. color#4378 Codepen:https://codepen.io/color0602/pen/LYQZXxM?editors=1000 --> <!--124. 阿風#6890 Codepen:https://codepen.io/Afong-Wind/pen/JjpbjrZ --> <!-- Shang#9066 codepen:https://codepen.io/shang1104/pen/xxYRdqV--> <!-- 米金#1399 https://codepen.io/ihrowjtq-the-vuer/pen/vYdXXZX?editors=1100 --> <!--125. 小羅#9921 codepen:https://codepen.io/peizhen0609/pen/RwQoLvy --> <!--126. 靜宜#6866 codepen:https://codepen.io/jamie18/pen/dydOJVy --> <!--126. Jumpye#8601 codepen:https://codepen.io/Jumpye/pen/wvyoyzj?editors=1100 --> <!--127. Abel codepen:https://codepen.io/lun_chi/pen/OJQbZYj --> <!--128. Cora #3153 codepen:https://codepen.io/coracola/pen/qBxqgQr --> <!--129. kk28976328#1197 codepen:https://codepen.io/kk28976328/pen/abqBMzJ --> <!-- 130. Van.CS #2067 codepen:https://codepen.io/fbacojji-the-selector/pen/QWQGoMb?editors=1100 --> <!-- 131. Lian Chen codepen:https://codepen.io/CCL1007/pen/yLvVrqE --> <!--132. singend#0876 codepen:https://codepen.io/singend/pen/RwQoggv --> <!--133. 艾芮絲#6060 codepen: https://codepen.io/wangyingju/pen/MWQJgRW?editors=1100 --> <!--134. Lynn73 #3164 codepen: https://codepen.io/LYNN0703/pen/NWydWjK --> <!--135. Jean codepen: https://codepen.io/jean-liu/pen/XWZpKXj --> <!-- 136. 大衛 codepen: https://codepen.io/exnsrpjc/pen/QWQdNXR --> <!-- 137. 小鹿Kerwin#5730 codepen: https://codepen.io/tkoleo84119/pen/RwQKKpY - --> <!-- 138. 亞芽 #1185 https://codepen.io/sanahsu/pen/OJQWbwZ?editors=1100 --> <!-- 139. azami#5986 codepen : https://codepen.io/azami/pen/xxYgLVa --> <!-- 140. 肉桂卷#0625 codepen : https://codepen.io/ginnlee/pen/ZErLygy?editors=1100 --> <!-- 141. Sussu#4211 codepen : https://codepen.io/yatiti84/pen/OJQWOaK --> <!-- 142. Omi#3467 codepen : https://codepen.io/chian0501/pen/QWQdxEr --> <!-- 143. Mojito#6002 codepen: https://codepen.io/vu3xk41997/pen/RwQKEWm --> <!--144 zera#6060 codepen : https://codepen.io/zera-tseng/pen/RwQomGV --> <!--145. Vito#7797 https://codepen.io/Vito_Yang/pen/NWypWRJ --> <!--146. Jamie https://codepen.io/Wu220103/pen/dydXqYY --> <!--147. YC#2008 Codepen: https://codepen.io/danisternburg/pen/MWQpgXx?editors=1100 --> <!--147. skypassion5000#4151 Codepen: https://codepen.io/skypassion5000/pen/YzeZpRZ?editors=1100 --> <!--148. 果凍#0374 Codepen: https://codepen.io/pbhdzjdb-the-bashful/pen/RwQpVra --> <!--149. 諾拉#4800 Codepen: https://codepen.io/Naomi_riayun/pen/rNJymMo --> <!--150. Lisa L.#0426 Codepen: https://codepen.io/Lisa-Liao/pen/vYdxaba --> <!--151. Sophia19#4005 Codepen: https://codepen.io/sophia019/pen/LYQWXyy --> <!--152. Renad#0242 Codepen: https://codepen.io/ruby-teng/pen/qBxrzzV --> <!--152. CHIA#3031 Codepen: https://codepen.io/chiachiaD/pen/XWZRrVG?editors=1100 --> <!--153. AmberC#1372 Codepen: https://codepen.io/AmberChuang/pen/zYRwEvJ --> <!--154. Georgina#9761 Codepen: https://codepen.io/9gina/pen/NWyjwZV--> <!--154. 狸貓#9725 Codepen: https://codepen.io/leeemo/pen/vYdmYEm --> <!--155.Marco Yin #2673 Codepen:https://codepen.io/Marcoyin/pen/OJQmBRX?editors=1100 --> <!--156.weihsin#5643 Codepen:https://codepen.io/weisin/pen/gOvRrVm?editors=1100 --> <!--157.Neman Codepen:https://codepen.io/newmankz/pen/oNEwWJv?editors=1100 --> <!--158.whatsupcc Codepen:https://codepen.io/ccchian/pen/jOZmXzq?editors=1100 --> <!--159.CrystalD#6007 Codepen:https://codepen.io/Crystaldu/pen/BaYdjgX --> <!--160.piha#9987 Codepen:https://codepen.io/pihahaha/pen/mdXMgoz --> <!-- 161. H2CO3#7232 https://codepen.io/guan-zhen-wang/pen/xxYEdxV?editors=1100 --> <!-- 162. JessieCho https://codepen.io/jessieCho/pen/YzerBoM --> <!-- 163. Yurii#7455 https://codepen.io/Yurii-Wen/pen/ExQbxdM?editors=1100 --> <!-- 164.bakiii https://codepen.io/aki168/pen/rNJYYJr --> <!-- 165. jing#6810 https://codepen.io/jing2357/pen/XWZzOeN --> <!-- 166. Eileen#6454 https://codepen.io/Eileen-io/pen/YzeEddQ --> <!-- 167. Zooey Cheng https://codepen.io/noraneko0430/pen/jOZBMKm?editors=1100 <!-- 167. Vivian#9511 https://codepen.io/Vivianliuu/pen/NWyXaKO?editors=1100 <!-- 168. mei#8421 https://codepen.io/Shila-Chen/pen/abqEYgP <!-- 169. jiajiajiahou#5229 https://codepen.io/chia-chia-hou/pen/jOZYXWa?editors=1100 <!-- 170. 青幻#9684 https://codepen.io/LYUYU/pen/oNEMBVw <!-- 171.Barret#1119 https://codepen.io/barret0720/pen/LYQJWGW --> <!-- 172.JOU#6876 https://codepen.io/joujoujou924/pen/rNJZgxm?editors=1100 --> <!-- 173.Zoey#0839 https://codepen.io/zoec/pen/xxYmKKE -->