---
tags: 網頁切版直播班 - 2021 夏季班
---
# 7/14(三) 每日任務

## 問題

請試著加上 flex 屬性讓 UFO 換到第一個位置並且讓四張圖片可以水平對齊，左右靠齊邊，如圖：


HTML

<div class="box">
    <img src="https://www.filepicker.io/api/file/tNa2so2RRMuedpc2yydt" alt="logo" width="150">
    <img src="https://www.filepicker.io/api/file/tNa2so2RRMuedpc2yydt" alt="logo" width="150">
    <img src="https://www.filepicker.io/api/file/tNa2so2RRMuedpc2yydt" alt="logo" width="150">
    <img src="https://register.rocket-coding.com/img/ufo.png?1081104" width="150">
</div>

CSS

.box{
  width: 850px;
  margin: 0 auto;
  border: 1px solid black;
}

## 回報流程

1. 將答案寫在 Codepen 並複製 Codepen 連結貼至「回報區」中回報就算完成了喔～解答請參考下方


<!-- 解答： [Codepen 範例](https://codepen.io/AliceChiang/pen/ZEQxZVw) -->

回報區
---
<!-- 0. Bingbingboom（回報範例，請使用註解回報）
Codepen：https://codepen.io/Bingbingboom/pen/RwpQQod
-->

<!-- 1. 焦糖
Codepen: https://codepen.io/yen-kg/pen/YzZLLpW
-->

<!-- 2.孫https://codepen.io/Sunne/pen/vYxPxLm -->

<!-- 3. 蔡明達
Codepen: https://codepen.io/bmzpfyxe/pen/GRWPEGO?editors=1100
-->

<!-- 4.natsu
Codepen: https://codepen.io/natsu19/pen/QWvGZmr
-->
<!-- 5.Winnie
Codepen: https://codepen.io/winnie0208/pen/BaRQeQW
-->

<!--6:Alpha
Codepen:https://codepen.io/alphatero/pen/rNmjwbL
-->

<!--7:lumei
Codepen: https://codepen.io/l_umei/pen/NWjdgom
-->

<!-- 8.Alvin Chu
codepen:https://codepen.io/wave99487chu/pen/oNWBwVo
-->

<!-- 9. Riley
Codepen：https://codepen.io/jjpxbprd/pen/YzVNQBe
-->
<!-- 10.陳sam
codepen:https://codepen.io/euldpliv/pen/KKmaqLK
-->

<!-- 11.Jun Chan
codepen:https://codepen.io/chujunchan/pen/dyWNREJ
-->

<!-- 12.Jean
codepen:https://codepen.io/jean-liu/pen/GRmrEaX
-->

<!-- 13.curry
codepen:https://codepen.io/Ted19851223/pen/oNWBwrp
-->

<!-- 14.吐司
codepen:https://codepen.io/danielle-zhang/pen/yLbgXmY
-->

<!-- 15. Lina Chen
codepen: https://codepen.io/LinaChen/pen/RwVKgzB
-->

<!-- 16. WilsonHan
codepen:https://codepen.io/wi0821/pen/MWmJvgK
-->

<!-- 17.Scarlett史嘉
codepen:https://codepen.io/qoxttdjg-the-encoder/pen/abWpweW?editors=1100 -->

<!-- 18.Cheng Pei-hsuan
codepen: https://codepen.io/PaCheng/pen/LYybJqa
-->

<!-- 19. Vic
codepen: https://codepen.io/hsuan333/pen/GRmrvRw
-->

<!-- 20. 群嘉
codepen:https://codepen.io/efzdamnp-the-lessful/pen/gOWgxpZ?editors=1100
-->

<!-- 21. YuriT
codepen: https://codepen.io/wenfisht/pen/PomWKoV?editors=1100
-->
<!-- 22. roger
codepen: https://codepen.io/rogerchuang/pen/LYyxjEe?editors=1100
-->
<!-- 2３. Kaka
codepen: https://codepen.io/potatokaka/pen/wvdgqKL?editors=1100
-->

<!--24. yijun
codepen:
https://codepen.io/sandy3068/pen/dyWNzvj
-->

<!--25. Cora
codepen: https://codepen.io/chakrafiregirl/pen/BaRpdRX
-->

<!--26. Will
codepen: https://codepen.io/will-liu/pen/qBmRXXY?editors=1100
-->

<!--27. 肉鬆
codepen: https://codepen.io/klrkicog/pen/RwVKZLv
-->

<!--28. Jasmin
codepen:https://codepen.io/thejasmin/pen/abJwGqM
-->

<!--29. 文文
// 只改CSS即可，如下
.box {
width: 850px;
margin: 0 auto;
border: 1px solid black;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}
-->

<!--30. Eric-小偉哥
codepen: https://codepen.io/ericLoveDesign/pen/rNmjzYz
-->

<!--31. Cate Chang
codepen: https://codepen.io/tutz/pen/PomWKJr
-->

<!-- 32. Ryan
codepen: https://codepen.io/RyanYD/pen/qBmRXLJ
-->

<!-- 33. Elaine Liu
codepen: https://codepen.io/elaine7598/pen/yLbgoRb
-->

<!-- 34. Sz
codepen: https://codepen.io/szyln/pen/poPRrBw
-->

<!-- 35. 雷古娜
codepen: https://codepen.io/tinahopo/pen/XWRpawE -->

<!-- 36: peter.chen1024
codepen: https://codepen.io/JIAN-RONG/pen/ExmZvqp?editors=1100
-->

<!-- 37: Joy Cheng
codepen:https://codepen.io/joycheng5432/pen/JjNErow
-->

<!-- 38:PHIL
codepen:https://codepen.io/ctkeftjp-the-animator/pen/QWvdqbv
-->

<!-- 39:Archie
codepen:https://codepen.io/WuChengHua/pen/zYwNEGL
-->

<!-- Yen
https://codepen.io/Hoyi/pen/QWvdqyg
-->

<!-- 41.黃士桓
https://codepen.io/shr-huan-huang/pen/poPRrYP
我提共了兩種解法
一種是用流向反轉
一種是用子代選擇器選擇最後一個項目用order的方式改變位置
-->
<!--42 icy
https://codepen.io/ccsbjzze-the-sasster/pen/NWjdaGd
-->

<!-- 43. Irene Wang
codepen:https://codepen.io/irene-wang-the-looper/pen/NWjdarp
-->

<!-- 44. Ariel
codepen:https://codepen.io/Arielariel/pen/PomWJbz
-->

<!-- 45. huanan
codepen:https://codepen.io/hua_nan/pen/GRmrMWZ
-->

<!-- 46. SihLe Huang
code: https://codepen.io/bugbug777/pen/abWpLwM
-->

<!-- 47. Gill
codepen:
https://codepen.io/Gill-Chin/pen/mdmRBMP?editors=1100
-->

<!-- 48. sans-ge
codepen:
https://codepen.io/Sans-ge/pen/MWmJEEX
-->

<!-- 49. RitaHuang
https://codepen.io/Rita-Rossweisse/pen/ZEKBLvQ?editors=1100
-->
<!-- 50. ZY Hsu
https://codepen.io/zihyin/pen/gOWgGQm -->

<!-- 51. Sylvia-H
https://codepen.io/Cosmosheart/pen/RwVKLYG?editors=1100
-->

<!-- 52. Gui
https://codepen.io/guitimliu/pen/ZEKLXwV
-->

<!-- 53. Xing
https://codepen.io/xing10/pen/ZEKLXZw
-->

<!-- 54. Karen Huang
https://codepen.io/Coding_Snorlax/pen/poPNXWM
-->

<!-- 54. winnie
https://codepen.io/hsuanyu0115/pen/WNjRXNy
-->

<!-- 55. 阿和
codepen:
https://codepen.io/shnny/pen/mdmRqMp
-->

<!-- 56. 大衛
https://codepen.io/exnsrpjc/pen/NWjdwye
-->

<!--57.Peggy Tsai
https://codepen.io/pei-chi-tsai/pen/OJmWOQw
-->

<!--58. Sam li
codepen: https://codepen.io/sam830623/pen/VwbPrEr
--->

<!--59. 林雨樞
https://codepen.io/FISH0701/pen/RwVKxre
-->

<!-- 60. 阿熊
https://codepen.io/hsiungchi/pen/zYwNpLp -->

<!-- 61. anna
https://codepen.io/annhys/pen/xxdgpMJ -->

<!-- 62.阿瓜
https://codepen.io/hoick/pen/mdmRpoN -->

<!-- 63.Oober
https://codepen.io/xtsjrjdv/pen/yLbgvPj
-->

<!-- 64.Nate Lu
https://codepen.io/nate12/pen/abWpYBv
-->

<!-- 65.Yao Lin
https://codepen.io/yaoyaoiii/pen/BaRprGG
-->

<!-- 66.Summer.H
https://codepen.io/wan-chine/pen/zYwNWyB
-->

<!-- 67.Katie Zhao
https://codepen.io/katiezhao/pen/rNmjvrG
-->

<!-- 68 叻叻豬
https://codepen.io/ericxcode/pen/MWmJGPm
-->
<!-- 70. Tina Yen
codepen: https://codepen.io/tlorfrnl-the-typescripter/pen/qBmRKav?editors=1100
-->

<!-- 70. Freya
codepen:
https://codepen.io/iyowai/pen/xxdgzXe?editors=1100
-->
<!-- 71.yellamoon
codepen:
https://codepen.io/pwbzvqja/pen/GRmrGPr
-->
<!-- 72.童筱涵
codepen:
https://codepen.io/hsiaohan/pen/RwVKBwp
-->

<!-- 73. Tansy
codepan: https://codepen.io/subarashii-huch09/pen/LYyxBrW
-->

<!-- 74.Meng
codepen:
https://codepen.io/MGHN/pen/KKmNjoO
-->

<!-- 75.Jameskrauser
codepen:
https://codepen.io/jameskrauser/pen/dyWNjZW?editors=1100
-->

<!-- 76. hellocrab
https://codepen.io/hellocrab/pen/YzVNjvr
-->

<!-- 77.粘勝凱
https://codepen.io/szykttdy/pen/dyWNjEZ
-->

<!-- 79.Jerry Yen
https://codepen.io/JerryYen/pen/QWvdVOj
-->

<!-- 80. Hi Annie
https://codepen.io/lhohdalu/pen/rNmjqpq
-->

<!-- 81. 鉦勝
https://codepen.io/atckmax823/pen/zYwNmJb
-->

<!-- 82. Benson
https://codepen.io/polarBear712/pen/eYWgQgq
-->

<!-- 83. GaryYang
Codepen: https://codepen.io/fong-yuyang/pen/poPRQRG
-->

<!-- 83.jimmyFang
Codepen: https://codepen.io/pohxiqqo/pen/rNmjQKV
-->

<!-- 84.Erin Huang
Codepen: https://codepen.io/ErinHuang/pen/KKmabWd
-->

<!-- 85.Jim Hwang
Codepen: https://codepen.io/jimh1129/pen/xxdgmWY
-->

<!-- 86. Jocelyn
codepen:https://codepen.io/enjoyful/pen/bGWgOxd
-->

<!-- 87. shanglin
codepen:https://codepen.io/rmovuagr-the-selector/pen/oNWBmxO
-->

<!-- 88. stepha
Codepen:https://codepen.io/w1112yb/pen/eYWgxBr
-->

<!-- 89. 黃小瑄
https://codepen.io/5quvgp2z/pen/oNWBVme
-->

<!-- 90. [Jeff H](https://hackmd.io/33sCZ5NyRKqER5Lxo2Yshw?view)-->

<!-- 91. 葉小嵐 https://codepen.io/una607/pen/WNjpejj
-->
<!-- 92. LTL https://codepen.io/ltlin93/full/zYwZxVR
-->
<!-- 93. Paisley Chien
https://codepen.io/canaerkk/pen/poPeJWp
-->
<!-- 94. Fleur
https://codepen.io/swwlee/pen/rNmWZPv
-->
<!-- 95. kane0927 https://codepen.io/kane-lin/pen/zYwZrzw
-->

<!-- 96. Charles
https://codepen.io/gemini9160/pen/WNjprVx
-->

<!-- 97. Jemma
https://codepen.io/Jemma9/pen/oNWZbOa
-->
<!-- 98. Una(點子數位)
https://codepen.io/xbsapbas-the-vuer/pen/QWvpNxq
-->

<!-- 98. Larry
https://codepen.io/manpower0708/pen/oNWZLBL
-->
<!-- 99. YOYO
https://codepen.io/lumedkle/pen/VwbpjVz
-->

<!-- 100. AKI
https://codepen.io/akichen27/pen/gOWmLaO
-->

<!-- 101. 沈依蓉
https://codepen.io/lily-oa/pen/yLbMVjK
-->

<!-- 102. 沈依蓉
https://codepen.io/_u_jung/pen/mdmWRmw
-->

<!-- 103. Jamie
https://codepen.io/JamieChenWs/pen/abWJyJW
-->

<!-- 104.Carol LEE
https://codepen.io/chiashiunlee/pen/yLbMoGV
-->

<!-- 105.格可
https://codepen.io/catabo/pen/poPeWve
-->

<!-- 106. Zaii Hsu
codepen: https://codepen.io/ivy2846357/pen/dyWvZyY?editors=1100 -->

<!-- 107. Calon
Codepen: https://codepen.io/Calon0118/pen/ZEKevNK
-->

<!-- 108. Ruby Chiang
Codepen: https://codepen.io/rubyyl0701/pen/WNjpMgE
-->

<!-- 109. 袁祥恩
Codepen:
https://codepen.io/ovfxsavp-the-bashful/pen/GRmWLMY?editors=1100
-->

<!-- 110.Shani
codepen:https://codepen.io/ShaniMa/pen/gOWmVqy -->

<!-- 111. ZOE WU
Codepen: https://codepen.io/Zoechiueh/pen/LYyyPyM?editors=1100-->

<!-- 112. Tori
Codepen: https://codepen.io/hayen/pen/KKmWXGZ?editors=1100
-->

<!-- 113. rose
Codepen: https://codepen.io/roseling30/pen/Vwbbywb
-->

<!-- 114. Joe Kuo
Codepen: https://codepen.io/alertislow/pen/NWjjXMV
-->

<!-- 115. Joanna chang
Codepen: https://codepen.io/polilu1985/pen/gOWWoBZ
-->

<!-- 116.周周
Codepen:https://codepen.io/jhoujhou-the-decoder/pen/eYWWKmv -->

<!-- 117 axlrock1021
Codepen: https://codepen.io/lnjbmmxo/pen/ExmmRWQ -->

<!-- 118 Zooey Cheng
Codepen: https://codepen.io/noraneko0430/pen/MWmmZmg?editors=1100
-->

<!-- 119 Ning
Codepen: https://codepen.io/fangninglin/pen/ExmmBoz
-->

<!-- 120 Kin Hei Shing
Codepen: https://codepen.io/kinhei-shing/pen/eYWRPbG
-->
<!-- 121 Blake Hung
Codepen: https://codepen.io/Blakehong/pen/xxdLdbq
-->
<!-- 122 ellie
css .box加上
display:flex;
justify-content: space-between;
flex-direction: row-reverse;
-->

-->
<!-- 123. 三隻小貓
Codepen: https://codepen.io/bagelover/pen/mdmBJPx
-->

<!-- 124. 陳品宏
codepen:
https://codepen.io/wtka/pen/LYyzzZW
-->

<!-- 125. sarah
codepen:
https://codepen.io/sarah-wang/pen/RwVLYMo?editors=1100
-->

<!-- 126. 魚魚
codepen:
https://codepen.io/YuYu_29/pen/abWEVGL
-->

<!-- 127. Min Chun Tsai
codepen:
https://codepen.io/Tsai0926/pen/zYwpWME
-->

<!-- 128. irene
CodePen：https://codepen.io/lohas1107/pen/dyWeMPr?editors=1100
-->

<!-- 129. WA
https://codepen.io/ldddl/pen/mdmKKJo
-->

<!-- 130. Jessie Cheng
https://codepen.io/JessieMosbi/pen/xxdzovw
-->

<!-- 131. Newman
https://codepen.io/newmankz/pen/oNWMYLy
-->

<!--132.Page
https://codepen.io/kanawin821/pen/xxdyoom
-->

<!--133.聿凌
https://codepen.io/igzdflpu/pen/GRmwQRv
-->

<!--134.黃羽均
https://codepen.io/azzfgtpo/pen/bGWJQYM
-->

<!--134.twoz
https://codepen.io/twoz/pen/dyWBwZW?editors=1100
-->

<!--135.keep
https://codepen.io/keep-/pen/OJgRVoL
-->

<!--136.Pocky
https://codepen.io/linlin_web/pen/GRvyppM?editors=1100
-->