---
# System prepended metadata

title: "\U0001F3C5 Day 6 - flex 改變主軸線排版、align-self 運用"
tags: [Sponya 體驗營 - 2024]

---

# 🏅 Day 6 - flex 改變主軸線排版、align-self 運用

### flex-direction
在外層元素設定 `flex-direction: row／column;（預設值為 row）` 可以調整主軸線排版，讓內層元素可以水平（row）、垂直（column）排列

### align-self
在子元素設定 `align-self` 可以調整該元素在交錯軸的對齊方式


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


題目
---
複製此[模板](https://codepen.io/hexschool/pen/zYbgoLz)，觀察 HTML 結構，運用 flex 技巧改變右側 articleIntro 區塊主軸線，將「MORE」連結對齊圖片底部並運用 `align-self` 將「MORE」靠右
（只需調整 CSS 區塊內 `＊` 的地方）

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



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


## 回報流程

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

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

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




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

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