---
# System prepended metadata

title: "\U0001F3C5 Day 5 - flex 基本運用"
tags: [Sponya 體驗營 - 2024]

---

# 🏅 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」並垂直置中對齊、左右貼齊兩側排列

完成圖：
![sponya-d5](https://hackmd.io/_uploads/HyzMCpSnT.png)


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

## 回報流程

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

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

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




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

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