---
# System prepended metadata

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

---

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

## 問題

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

![](https://i.imgur.com/6SrO6s6.png)


HTML
```htmlembedded=
<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
```css=
.box{
  width: 850px;
  margin: 0 auto;
  border: 1px solid black;
}
```
## Result:
**Ans: [CodePen 連結](https://codepen.io/jeffhung/pen/zYwNVzx)**