# 🏅 Day 5 - flex 基本運用

在外層元素設定 `display: flex;` 可以將內層子元素並排排列，搭配 justify-content、align-items 可以變換內層元素排版

### 相關影音章節：
- CSS - Flex 網頁排版技巧
- 文章參考：https://w3c.hexschool.com/flexbox/2186a786

題目
---
複製此[模板](https://codepen.io/hexschool/pen/oNVrXaQ?editors=1100)，觀察 HTML 結構，運用 flex 技巧，
調整 HTML、CSS 區塊內 `＊` 的地方（ `/* Day5 設定 */` 下方），達成下列要求：
1. 讓圖片與文字區塊可以並排與左右貼齊兩側排列
2. 為英文標題「2020 Valentine's Special」右側加上日期「2020/02/14」並垂直置中對齊、左右貼齊兩側排列

完成圖：

模板與解答皆有載入 CSS Reset 清除瀏覽器預設設定，
使用 Codepen 可直接在 `Settings > CSS > CSS Base > Reset` 設定

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：
https://codepen.io/hexschool/pen/zYbQzqM
-->

回報區
---
<!--
將答案貼至下方表格內，格式：
| Discord 暱稱 | [CodePen](連結) |
-->

| Discord | CodePen／答案 |
|:----------:|:--------------------:|
| xxx | [CodePen]() |