---
tags: 網頁切版直播班 - 2021 夏季班
---
{%hackmd theme-dark %}
# 7/16 每日任務 Day10：flex 完成九宮格排版
## 題目

請嘗試在「...」的地方加上 CSS flex 屬性完成以下圖片中的排版


請在 Pen Settings 設定 CSS Reset，如圖：


---

HTML

<div class="container">
  <ul class="list">
    <li><img src="https://images.unsplash.com/photo-1602874268377-82a72d59ef4c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt=""></li>
    <li><img src="https://images.unsplash.com/photo-1603143422172-2568ea9680ac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt=""></li>
    <li><img src="https://images.unsplash.com/photo-1603135200184-96051b5ede9a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt=""></li>
    <li><img src="https://images.unsplash.com/photo-1590532740179-b7472613c3c4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt=""></li>
    <li><img src="https://images.unsplash.com/photo-1603162361859-49444c0aaebc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt=""></li>
    <li><img src="https://images.unsplash.com/photo-1603182737247-6419d55c10bd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt=""></li>
    <li><img src="https://images.unsplash.com/photo-1603135200184-96051b5ede9a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt=""></li>
    <li><img src="https://images.unsplash.com/photo-1603188389888-7b80bd0a7e3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt=""></li>
    <li><img src="https://images.unsplash.com/photo-1602874268377-82a72d59ef4c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt=""></li>
  </ul>
</div>

CSS

.container {
  width: 1200px;
  margin: 0 auto;
}
.list {
  ...
}
img {
  width: 400px;
  display: block;
}

## 解答
**[CodePen連結](https://codepen.io/jeffhung/pen/dyWRQOB)**
## 參考解答
> 解答：[Codepen 範例](https://codepen.io/AliceChiang/pen/OJXRdXQ)