# 🏅 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 區塊內 `＊` 的地方）

完成圖：

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

## 回報流程

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


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

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

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