---
tags: 網頁切版直播班 - 2021 夏季班
---
{%hackmd theme-dark %}
# 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;
}

## Result:
**Ans: [CodePen 連結](https://codepen.io/jeffhung/pen/zYwNVzx)**