---
tags: 六角學院, 2024 軟體工程師體驗營
---
# 六角學院體驗營 Week2 - Flexbox 多欄式排版全攻略
> 本週主題重點：講解 Flex 最常使用的六大語法，Flexbox 多欄式排版的應用。以下是一些自己的筆記和心得~

## :pushpin:本週課程的重點語法
* **display: flex**
* **flex-direction**
* 決定 flex 的軸線
* 可以根據使用者習慣的資訊流使用 reverse

* **justify-content**
* 主軸對齊

* **flex-wrap**
* 換行設定
* 當子元素(們)寬度超過父層時，flex 預設會自適應寬度，可以用 wrap 來實現換行

* **align-items**
* 交錯軸單行對齊
* 相對於主軸的另一個軸線，所以要先確定自己的主軸是哪個方向

* **align-content**
* 交錯軸多行對齊
* 就簡單的理解上來說，比較是當 flex 出現 wrap 時會發生
* 跟 align-items 都是交錯軸的對齊方式
* 補充：[align-content 屬性介紹](https://w3c.hexschool.com/flexbox/d0e569ef)、[align-items與align-content比較](https://guiblogs.com/flex-align/)

* **Flex 裡還可以包 Flex**
* 父層的設定 flex 只會影響子層
* 子層裡面可以繼續有 flex


>圖片來源：[CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flex-direction)

## :pushpin:常見錯誤和心得
### 主軸和交錯軸的概念
> 不要用right、left的方式來想，也不要用X軸、Y軸的概念去想，利用"主軸"和"交錯軸"去理解軸線對齊。

以前最初寫版型要讓內容置中的時候，可能會寫`margin`、`padding`、`text-align`、`float`、`position`等等的方式（用些奇奇怪怪的方式來寫😂），當第一次嘗試寫 flex 時，很單純地只想：**「水平置中後要怎麼讓垂直也置中？」** 並沒有所謂主軸和交錯軸的概念。

即使後來有自己練習刻過一些版型，自認對於`flex-direction`、`justify-content`的使用算是了解，但一直對於`align-items`、`align-content`、`align-self`的使用上還是常常會搞不太清楚… 這次在看過課程影片中的 flex 單元介紹以及這週直播課洧杰老師講解的這個圖後⬇⬇⬇，我覺得我好像真的有懂了！！！


:::warning
`flex-direction`定義你的主軸方向，`justify-content`是主軸對齊的方式，`align-items`是交錯軸對齊的方式。
:::

### Flex的設定只能影響下一層
> 富不過三代，無法到第三層

當在寫 flex 設定時，記住自己要寫的位置是很重要的，不需要將每一層都加上，而父層的設定會影響子層，但不會影響到子層的子層（~~孫子層？~~） 不過 **Flex 裡還可以包 Flex**，所以只要另外把子層加上 flex 設定，就可以再下一層繼續有 flex 的排版。

另外，在寫設定時，如果有同樣的 flex 設定也可以另外設置成 class，例如：要將內容置中，可以摘出來寫`.d-center`，重複使用或是修改上也比較方便。

.d-center{
    display: flex;
    justify-content: center;
    align-items: center;
}

## :pushpin:Flex 實用小工具 & 補充
* [FLEXBOX FROGGY](https://flexboxfroggy.com/)
* [Flexbox Playground](https://codepen.io/peiqun/pen/WYzzYX)
* [Flexbox 海盜](https://hexschool.github.io/flexbox-pirate/index.html#/)
* [圖解：CSS Flex 屬性一點也不難](https://www.casper.tw/css/2017/07/21/css-flex/)

很久之前就有被推坑玩過青蛙的練習遊戲（但忘了有沒有玩到底😅），而這次洧杰老師提供的 flex 資源裡面，六角竟然也有一個有趣的海盜遊戲！很推薦用這些遊戲去練習自己吸收到的程式語法，相信會對於大家內化這些知識有幫助~



## :pushpin:小組任務介紹 & 下週課程預習
### 小組任務二
1. 和小組成員共同提交切版任務作業一
2. 與組員們一起完成 Flex 精神時光屋

### 下週課程內容預習
1. 下禮拜會講RWD
2. 提前觀看【RWD - 伸縮自如的 RWD 排版術】單元

## :pushpin:未來學習方向
給予自己一些小目標吧：
* 盡可能地完成每日練習
* 完成 Flex 精神時光屋
* 繼續練習自己的英打能力
* 繼續練習[emmet語法](https://github.com/hexschool/EmmetPractice)（現在還是有些語法會記錯🥺），加快自己的開發速度
* 已經在小組團隊裡面擔任第三週的組長，希望能好好完成小組任務
* 可以試著回答作業討論的問題，從解決問題的同時去檢視自己的觀念

> 想給自己勉勵：一個版型要寫出來，不一定會有正確答案，可能有很多種解法，不用急於和別人比較，找到自己習慣和用起來順暢的方式！