---
# System prepended metadata

title: "\U0001F3C5 5/11(三) 每日切版任務 - flex 練習二"
tags: [公益程式體驗營 - 2022]

---

---
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 
-->