---
# System prepended metadata

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

---

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