--- tags: 公益程式體驗營 - 2022 --- # 🏅 5/10(二) 每日切版任務 - flex 練習一 ## 問題 * 用 Codepen 練習將四個 box 放置於大的 box 中 (各別是 400px* 400px 、 100px* 100px) 用 flex 語法將 box 放置如圖所示位置: ![](https://i.imgur.com/CuVTKZr.png) ![](https://i.imgur.com/WdFPP2v.png) <!-- ans: [flex01](https://codepen.io/DoLucky/pen/bGLdzMR) --> --- ## 回報流程 1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報 （也可以將答案直接貼至「回報區」） ![](https://i.imgur.com/vftL5i0.png) <!-- 解答： --> 回報區 --- <!-- 1. yunyun#5215 解答： Codepen：https://codepen.io/yun_yunni/pen/poayLgW --> <!-- 2. Bruno Yu 解答： Codepen：https://codepen.io/bruno-yu/pen/LYQNdVa --> <!-- 3. su#7798 codepen: https://codepen.io/wc-su/pen/dydMmYE --> <!-- 4. CloThEs Codepen：https://codepen.io/bogwdnxx-the-sans/pen/VwQaQJN --> <!-- 5. Art Codepen:https://codepen.io/ss97202tw/pen/eYVZMRj --> <!-- 6. bonnieli1414#4906 Codepen:https://codepen.io/bonnieli1414/pen/gOvredg --> <!-- 7. Jenny_ Codepen:https://codepen.io/Jenny_000/pen/mdXPxGr?editors=1100 --> <!-- 8.IreneLee codepen:https://codepen.io/ntjtcxpt-the-animator/pen/mdXPxqP --> <!-- 9.Jason Chen codepen:https://codepen.io/jason60810/pen/jOZqzYY --> <!-- 10.JackC codepen: https://codepen.io/key0329/pen/QWQNmyv --> <!-- 11. Cliff https://codepen.io/Cliff_hex/pen/oNExqag --> <!-- 12. Mitour#0672 codepen:https://codepen.io/mitour/pen/ExQKEBq --> <!-- 13. Easton#3863 Codepen: https://codepen.io/EastonIsCodingNow/pen/mdXPxaO --> <!-- 14. 君Jyun#0147 https://codepen.io/Okaybeok/pen/BaYKrRQ --> <!-- 15. Rex Chu https://codepen.io/rex_chu/pen/vYdGRZO --> <!-- 16. hsiuhsiu https://codepen.io/hsiuhsiu/pen/RwQaypZ --> <!-- 17. hw#0715 codepen: https://codepen.io/Lhwei/pen/poayVLX --> <!-- 18. 白狐 解答： Codepen：https://codepen.io/baihu7851/pen/qBxZYpq --> <!-- 19. 翁來 解答： Codepen：https://codepen.io/wguo8320/pen/xxYVjQg --> <!-- 20. yuyu#6310 解答： Codepen：https://codepen.io/yuyu0905/pen/qBxZYRN --> <!-- 21. Tuhacrt#0008 Codepen: https://codepen.io/Tuhacrt/pen/BaYKxVO --> <!-- 22. Josh Chen#4552 Codepen: https://codepen.io/hiphop825/pen/zYRqjQK?editors=1100 --> <!-- 23. Eric.S Codepen: https://codepen.io/Eric_Shen/pen/xxYVzKd --> <!-- 24. 楓之聲#6945 codepen:https://codepen.io/sshane258/pen/PoQNedB --> <!-- 25. LHchien https://codepen.io/lin_chien/pen/oNExdaw?editors=1100 --> <!--26. TunacanBoy#2206 https://codepen.io/JamesDesign/pen/MWQyXga --> <!-- 27.Chi Codepen: https://codepen.io/YoChi84/pen/XWZdqeJ --> <!-- 28. Joyce#3790 Codepen: https://codepen.io/joycehuang/pen/NWyNqEr?editors=1100 --> <!-- 29. NaRa#7954 Codepen: https://codepen.io/chou-nara/pen/QWQNrzR --> <!-- 30. deveryone#8090 codepen: https://codepen.io/raycheng/pen/MWQyGRw?editors=1100 --> <!-- 31. Noy https://codepen.io/MochiCodingPen/pen/GRQZGjP --> <!-- 32. Kiwi#9804 https://codepen.io/kiwi1113/pen/mdXPKwv --> <!-- 33. shujhen#7734 Codepen：https://codepen.io/shujhen/pen/ExQKLVx --> <!-- 34. Vera#5592 Codepen：https://codepen.io/skvera/pen/GRQZZVg --> <!-- 35. kc_tw#8242 Codepen: https://codepen.io/kcwang-tw/pen/oNExyaa --> <!-- 36. Jill#5577 CodePen: https://codepen.io/Jillkate/pen/oNExyrm --> <!-- 37. Muse#9741 CodePen: https://codepen.io/mu24/pen/qBxZKLM --> <!-- 38. 眠瀾#8857 CodePen: https://codepen.io/laron9486/pen/dydMKBr --> <!-- 39. EVC#1876 Codepen: https://codepen.io/elvi-chuang/pen/ExQKRML --> <!-- 40. Jan F#7277 Codepen: https://codepen.io/Jan-F/pen/vYdGrPw --> <!-- 41. RyanLu#3642 Codepen: https://codepen.io/ryanlu1125/pen/ExQKRJL?editors=0100 --> <!-- 42. han#9437 Codepen: https://codepen.io/qnrxylcw-the-reactor/pen/gOvrjowv --> <!-- 43. 炎炎＃0777 Codepen: https://codepen.io/kimyen260/pen/RwQayyx --> <!-- 44. Tori#1287 Codepen: https://codepen.io/FlyTori/pen/zYRqLmb --> <!-- 45. Raymond Lam#0344 Codepen: https://codepen.io/manshun-lam/pen/abqNjjr --> <!-- 46. Raymond Cynthia1111 Codepen: https://codepen.io/Cynthia1111/pen/MWQyBPq --> <!-- 47. Chaoci#2460 Codepen: https://codepen.io/gmailchao/pen/MWQyBNZ --> <!-- 48. Chcao#2993 Codepen: https://codepen.io/chaco-wang/pen/gOvrjyW --> <!-- 49. Arvin Codepen: https://codepen.io/family929317/pen/NWyNzOx?editors=1100 --> <!-- 50. RJRS#9430 Codepen: https://codepen.io/RJRS/pen/MWQyqgZ --> <!-- 51. 花禮湖燒#7359 Codepen: https://codepen.io/lai-pei/pen/bGLpxbL --> <!-- 52. 肉桂卷#0625 Codepen: https://codepen.io/ginnlee/pen/rNJerzZ?editors=1100 --> <!-- 53. Nini Chen#5790 Codepen: https://codepen.io/ninistyle/pen/YzeqjGK?editors=1100 --> <!-- 54. KuoMin#4931 Codepen: https://codepen.io/KuoMin/pen/MWQyqKx --> <!-- 55. ton#8977 Codepen: https://codepen.io/tonhan/pen/qBxZMmN --> <!-- 56. Peng https://codepen.io/peng-027/pen/KKQzeXz --> <!-- 57. ms_kellychen#6947 CodePen:https://codepen.io/KC1090901_W/pen/jOZqpmG --> <!-- 58. beanhuang Codepen: https://codepen.io/Beanhuang/pen/NWyNLyE --> <!-- 59. 小不點#1793 Codepen: https://codepen.io/fwmfmgkx-the-flexboxer/pen/xxYVajE --> <!--60. Jamie https://codepen.io/Wu220103/pen/WNMwgyP --> <!--61. RayChen#6088 Codepen: https://codepen.io/raychen1996/pen/ZErWjgw --> <!-- 62. Peng https://codepen.io/peng-027/pen/KKQzeXz --> <!-- 63. 鉦勝#8333 https://codepen.io/atckmax823/pen/QWQNZLe --> <!--64. Tin https://codepen.io/tinchen/pen/LYQNmmW> <!-- 65. Knn#0492 https://codepen.io/Knn_84/pen/OJQNBgY --> <!--66. 黑松胖#4836 https://codepen.io/yi-chien-hsieh/pen/MWQyqMw?editors=1100 --> <!--67. Codepen: SASIMI #5099 https://codepen.io/sashimi1327/pen/gOvrBXy --> <!--68. Bao #4997 Codepen: https://codepen.io/baoh/pen/vYdGzZZ?editors=1100 --> <!-- Shang#9066 codepen: https://codepen.io/shang1104/pen/mdXPQdb?editors=1100 --> <!--70. Hao#2485 https://codepen.io/hao216/pen/LYQNgQr --> <!--71. Hao#5806 https://codepen.io/howtobefine/pen/LYQNXew --> <!--72. 雷雷#7844 https://codepen.io/lei-yi-jie/pen/oNExQNm --> <!--73. 肉桂捲好好ㄘ#7885 https://codepen.io/viviii_/pen/RwQaqQr --> <!--74. 安安你好你是誰#7416 https://codepen.io/leave3310-the-looper/pen/YzeqdPG --> <!--75. 隔壁小王 Codepen: https://codepen.io/stevetanus/pen/yLvOQQq --> <!--76. Mylène Codepen: https://codepen.io/hamajibashi/pen/wvyGRwp --> <!--77. Stanley#3825 Codepen: https://codepen.io/sean_1215/pen/dydMQrY --> <!--78. Charlotte Lee Codepen: https://codepen.io/charlotte-lee/pen/ZErWVxz?editors=1100 --> <!--79. Yuhung#1391 Codepen: https://codepen.io/Yu__hung/pen/ZErWwOO --> <!-- https://codepen.io/Adif/pen/YzeqddE?editors=1100 --> <!-- 80.ozawa#8815 https://codepen.io/PIN-HSIN/pen/RwQaEXy --> <!-- 80. Murmurline#6969 https://codepen.io/murmurline/pen/jOZqXBQ --> <!--81. lyle#8123 Codepen: https://codepen.io/tomys/pen/wvyGNJL --> <!--82. Erica Chen#6929 Codepen: https://codepen.io/ericachen/pen/PoQNXBa --> <!--83. EG#7172 Codepen: https://codepen.io/paneg-jpeg/pen/ZErWPrj --> <!-- 84. Justinliu Codepen: https://codepen.io/justin0227/pen/GRQZeer?editors=1100 --> <!-- 85. LCC#9012 codepen:https://codepen.io/pamelaxchun/pen/OJQNGLj --> <!-- 86. HiyukiOuO # 8072 codepen:https://codepen.io/Befei/pen/ExQKJPY?editors=1100 --> <!-- 87. Katie codepen:https://codepen.io/Katie24/pen/BaYKVab --> <!--88. Yi#2702 https://codepen.io/yic1823/pen/LYQNvbN --> <!-- 89. Van.CS #2067 Codepen: https://codepen.io/fbacojji-the-selector/pen/vYdGMVW --> <!-- 90. Leo Song Codepen: https://codepen.io/sunnylaba/pen/dydMLRN --> <!-- 91. Carrie#2750 Codepen:https://codepen.io/carrie-wang/pen/dydMEPJ --> <!-- 92. Jumpye#8601 Codepen:https://codepen.io/Jumpye/pen/zYRqXWv?editors=1100 --> <!--93. Greta#0837 Codepen:https://codepen.io/gretali/pen/GRQZavz --> <!--94. Nina泥#1422 codepen: https://codepen.io/xiangqi09020/pen/xxYVNxd --> <!--95. mei#8421 codepen: https://codepen.io/Shila-Chen/pen/gOvrJbB --> <!--96. amy芳#1385 codepen: https://codepen.io/amy-chieng/pen/yLvOdyo --> <!-- 97. Triple https://codepen.io/riku30/pen/MWQyMvV --> <!-- 98. Data#9297 https://codepen.io/kirakira72/pen/qBxZedd --> <!--99. Marco Yin #2673 Codepen:https://codepen.io/Marcoyin/pen/LYQNKqY --> <!--100. rubyruby Codepen:https://codepen.io/Ruby0831/pen/qBxZeRb --> <!-- 101. AllenLi#6756 CodePen: https://codepen.io/knsybndf-the-animator/pen/NWyNOaP?editors=1101 --> <!-- 102. Lina Chen Codepen: https://codepen.io/LinaChen/pen/OJQNGea --> <!-- 103. Ning#6363 Codepen: https://codepen.io/fangninglin/pen/bGLpXxQ --> <!-- 104. muzz#0345 https://codepen.io/yunnnz/pen/vYdGoXx--> <!-- 105. WilliamChou#7375 Codepen: https://codepen.io/williampo78/pen/GRQZVed --> <!-- 106. Jia-Hong Chen#3863 Codepen: https://codepen.io/iloveleon19/pen/YzeqmYQ --> <!-- 107. Alphacostankion#8475 Codepen: https://codepen.io/alphapolo/pen/KKQzORY --> <!-- 108. 諾拉#4800 Codepen: https://codepen.io/Naomi_riayun/pen/eYVzOvB --> <!-- 109. ChaoChao Codepen: https://codepen.io/EmiiilyJ/pen/KKQMPWp --> <!-- J_u_d_y#5993 Codepen:https://codepen.io/J_u_d_y/pen/XWZKrRM?editors=1100 --> <!--111. _Evan伊凡 codepen:https://codepen.io/Evan_9837/pen/abqZorG --> <!--112. Ayre #0016 Codepen:https://codepen.io/yichunlin09/pen/XWZKrgM --> <!--113. skypassion5000#4151 Codepen:https://codepen.io/skypassion5000/pen/ExQyagY --> <!--113. ling chang#1024 Codepen:https://codepen.io/ling-chang/pen/WNMxNKZ --> <!-- 114. 阿基基 Codepen:https://codepen.io/JIJI_GNI/pen/RwQRbOm --> <!-- 115. will0708#7730 https://codepen.io/ncrdpepc-the-lessful/pen/GRQqgZE?editors=1100 --> <!--116. color#4378 https://codepen.io/color0602/pen/rNJLajE --> <!--116. 邊邊#2293 https://codepen.io/WinnieTsao/pen/dydXPYM?editors=1100 --> <!--117. 菟小歆#2154 1.https://codepen.io/catmoon1017/pen/GRQqRXq 2.https://media.discordapp.net/attachments/971423416622153799/971427233908555826/bandicam_2022-05-04_23-04-22-879.png?width=628&height=473--> <!-- 118. Patti Chiu Patti#7774 Codepen:https://codepen.io/peiru-qiu/pen/abqZdNo --> <!-- 119 yen#5757 codepen:https://codepen.io/TZU-HUANG-YEN/pen/KKQMpYN --> <!-- 120 Cheng-Yu#1813 codepen:https://codepen.io/ball77111/pen/ExQymag --> <!-- 121 kuo codepen:https://codepen.io/sunny-sun/pen/zYRBZdO --> <!-- 122 danny123 codepen:https://codepen.io/binlandz123/pen/dydXWYZ --> <!-- 123 andersonshen#4675 codepen:https://codepen.io/luxyenni-the-bold/pen/OJQXgwb --> <!-- 124 Vicky Chang#8846 Codepen: https://codepen.io/cychang/pen/eYVzRvV?editors=1100 --> <!-- 125 WeiKai codepen: https://codepen.io/beginneraboutlife116/pen/poabwKp --> <!--126 jada1109 #8756 codepen:https://codepen.io/jada1109/pen/jOZrGEj --> <!--127 Cheng#3012 codepen:https://codepen.io/XiBinCheng/pen/NWyrvQo --> <!--128 EllieLo#9809 codepen:https://codepen.io/ellie-lo/pen/MWQeOao --> <!--129 Tsuei#9284 https://codepen.io/AlbertoLL/pen/PoQzQYB --> <!--130 Arista https://codepen.io/arista-hsieh/pen/yLvJEXY --> <!-- 131 omega codepen: https://codepen.io/waittinghsu/pen/ZErOood--> <!-- 132 小天#7177 https://codepen.io/linyujing/pen/LYQZByq --> <!-- 133. Dun Dun#9857 Codepen：https://codepen.io/dundun/pen/wvyWXjL --> <!-- 134. yuling Codepen：https://codepen.io/igzdflpu/pen/abqZjqQ --> <!--135. shiaohan#0676 Codepen: https://codepen.io/shiaohan/pen/KKQzOMG --> <!-- 136. Sophia19#4005 Codepen: https://codepen.io/sophia019/pen/OJQXKjx?editors=1100 --> <!-- 137. Jie Du Codepen：https://codepen.io/qgqonost-the-flexboxer/pen/BaYLNOe?editors=1100 --> <!-- 138. xuan#0808 Codepen：https://codepen.io/xuan0915/pen/RwQGPOE --> <!-- 139. zzuhann #2786 codepen: https://codepen.io/zzuhann/pen/PoQGZQJ --> <!-- 139. Lyndon.Su #6018 codepen: https://codepen.io/jvvkahjx-the-lessful/pen/rNJMVoy --> <!-- 140. 家洋 #6999 codepen: https://codepen.io/yang940648/pen/zYRBRBK --> <!-- 141. 米金#1399 https://codepen.io/ihrowjtq-the-vuer/pen/abqmNPy --> <!-- 142.yoyo123456 #0577 https://codepen.io/hungyoyo/pen/vYdXXxK --> <!-- 143. ajhappy#6488 https://codepen.io/ajhappy5438/pen/GRQjjRq --> <!-- 144. H2CO3#7232 https://codepen.io/guan-zhen-wang/pen/VwQKmYW?editors=1100 --> <!-- 145. 黑白兔#0684 https://codepen.io/guan-zhen-wang/pen/VwQKmYW?editors=1100 --> <!-- 146. Lao#4012 codepen: https://codepen.io/rao418065/pen/VwQKbGx?editors=1100 --> <!-- 146. Susan8402#5854 codepen: https://codepen.io/Susan8402/pen/GRQjeaJ?editors=1100 --> <!-- 147. 阿風#6890 codepen: https://codepen.io/Afong-Wind/pen/gOvLORN --> <!-- 148. 嘟嘟莉#2170 https://codepen.io/nicki202204/pen/qBxqZGP --> <!-- 149. Mojito#6002 codepen: https://codepen.io/vu3xk41997/pen/QWQKeYB --> <!-- 150. 靜宜#6866 codepen: https://codepen.io/jamie18/pen/vYdyZYa --> <!-- 151. singend#0876 codepen:https://codepen.io/singend/pen/poaNwNy --> <!-- 152. 小羅#9921 codepen:https://codepen.io/peizhen0609/pen/eYVBGMm --> <!-- 153. kk28976328#1197 codepen:https://codepen.io/kk28976328/pen/wvyopwW --> <!-- 154. TAKO#3277 codepen:https://codepen.io/TAKOBEA/pen/JjpbMvg --> <!-- 155. Lian Chen codepen:https://codepen.io/CCL1007/pen/BaYQYdV --> <!-- 156. Zera#6060 codepen : https://codepen.io/zera-tseng/pen/ExQNOBL --> <!-- 157. Cora #3153 codepen : https://codepen.io/coracola/pen/vYdybOg --> <!-- 158. YANSzero#5436 codepen :https://codepen.io/yanszero/pen/NWyboQm --> <!-- 159. Sussu#4211 codepen :https://codepen.io/yatiti84/pen/KKQNYyZ --> <!-- 160. 艾芮絲#6060 codepen : https://codepen.io/wangyingju/pen/oNEBvWz --> <!-- 161. Lynn73 #3164 codepen : https://codepen.io/LYNN0703/pen/GRQrRRB --> <!-- 162. 小鹿Kerwin#5730 codepen : https://codepen.io/tkoleo84119/pen/mdXRybN --> <!-- 163. 大衛 codepen : https://codepen.io/exnsrpjc/pen/ExQZKeP --> <!-- 164. Jean codepen : https://codepen.io/jean-liu/pen/oNEBxmW --> <!-- 164. 狸貓#9725 codepen : https://codepen.io/leeemo/pen/PoQNrmN --> <!-- 165. azami#5986 codepen : https://codepen.io/azami/pen/vYdggwP --> <!-- 166. judy0927#4241 codepen : https://codepen.io/judycxc/pen/ExQZvdr --> <!-- 167. Renad#0242 https://codepen.io/ruby-teng/pen/xxYgggr --> <!-- 167. Omi#3467 https://codepen.io/chian0501/pen/mdXRpGV --> <!-- 168. YC#2008 Codepen: https://codepen.io/danisternburg/pen/zYRZOBX?editors=1100 --> <!-- 169. Vito#7797 https://codepen.io/Vito_Yang/pen/bGLqGVO?editors=1100 --> <!-- 170. Zooey#6634 https://codepen.io/noraneko0430/pen/GRQrdMJ??editors=1100 --> <!-- 171. 果凍#0374 https://codepen.io/pbhdzjdb-the-bashful/pen/qBxrrBY --> <!-- 172. Lisa L.#0426 https://codepen.io/Lisa-Liao/pen/poayQMO --> <!-- 173. AmberC#1372 https://codepen.io/AmberChuang/pen/dydWRpN --> <!-- 174. Georgina#9761 https://codepen.io/9gina/pen/eYVWeBq --> <!--175. CrystalD#6007 https://codepen.io/Crystaldu/pen/GRQEJeN --> <!--176. weihsin#5643 https://codepen.io/weisin/pen/KKQgpow --> <!--177. 拿鐵#7585 Codepen：https://codepen.io/qinsplanet1024/pen/JjpJKGo --> <!--178. gahwa#3562 https://codepen.io/gahwa17/pen/RwQgorX?editors=1100 --> <!--179.青幻#9684 https://codepen.io/LYUYU/pen/QWQMENQ --> <!--180. yuTingHsieh#0950 https://codepen.io/HsiehYuTing/pen/qBxaEKb --> <!-- 181.piha#9987 https://codepen.io/pihahaha/pen/abqyMao --> <!-- 182.yuki#9465 https://codepen.io/yukilin549/pen/gOvmxJr?editors=1100 --> <!-- 183.JessieCho https://codepen.io/jessieCho/pen/dydVaEa --> <!-- 184.Yurii#7455 https://codepen.io/Yurii-Wen/pen/eYVGqWq?editors=1100 --> <!-- 185.bakiii https://codepen.io/aki168/pen/MWQOELJ--> <!-- 186.Eileen#6454 https://codepen.io/Eileen-io/pen/mdXqaLM--> <!--187. jing#6810 https://codepen.io/jing2357/pen/ZEraVMd--> <!-- 188. Vivian#9511 https://codepen.io/Vivianliuu/pen/JjpOGEY --> <!--189. jiajiajiahou#5229 https://codepen.io/chia-chia-hou/pen/WNMXoJv --> <!-- 190. Barret#1119 https://codepen.io/barret0720/pen/ZErMLxP --> <!-- 191. JOU#6876 https://codepen.io/joujoujou924/pen/rNJZgOm?editors=1100 --> <!-- 192. Zoey#0839 https://codepen.io/zoec/pen/XWZyLwy -->