# 網頁切版直播班[2] Flexbox 網頁排版術
## Flex特性
* Flex container 外容器介紹
* flex只會影響到下一層的內元件
* 內元件要有效果，就要在外容器加上 display:flex
* 每個 HTML 標籤，能同時擁有內元件跟外容器身份
* 當內元件總寬度超過外容器寬度，會自適應(會整除外容器寬度)
## Flex外容器常用語法
* 決定軸線(**資訊流**)：**flex-direction**
* row (左→右)
* row-reverse (左←右)
* column (上→下)
* column-reverse (上←下)

* 主軸對齊：**justify-content**
* flex-start
* center (jcc)
* flex-end (jcfe)
* space-between (jcfb)
* space-around (左右留白為中間留白的一半)
* space-evenly (全部留白且平均)

* 換行屬性：**flex-wrap**
* nowrap
* wrap (**fxww**)
* wrap-reverse
* 交錯軸對齊：**align-items**
* flex-start
* center
* flex-end
* stretch (**齊頂齊底**)
* baseline (**文字對齊**)
* 調整**多行**的元素交錯軸的對齊設定：**align-content**
>[連結1](https://www.oxxostudio.tw/articles/201501/css-flexbox.html)
>[連結2](https://stackoverflow.com/questions/27539262/whats-the-difference-between-align-content-and-align-items)
* **flex-flow** 是 `flex-direction` 與 `flex-wrap` 的縮寫
## Flex內元件屬性
* **flex** - 如果 flex 只填了一個數值 ( 無單位 )，那麼預設就是以 flex-grow 的方式呈現
* flex-grow
* flex-shrink
* flex-basis - 與 width 很像，但優先程度較高。
- #### 參考連結
>[連結1](https://wcc723.github.io/css/2017/07/21/css-flex/)
>[連結2](https://wcc723.github.io/css/2020/03/08/flex-size/)
>[連結3](https://ithelp.ithome.com.tw/m/articles/10208741)
* 重新定義元件的排列順序(-1第一個)：**order**
* 可以調整單一內元件交錯軸的對齊設定：**align-self**
* flex-start
* center
* flex-end
* space-between
* space-around
* stretch
## 技巧
1. 通常在做一個版型，開始先用圖筆去畫
2. 一個區塊一個區塊去切
3. `ul.couse>li*3>(img+h2+p)`
4. 能最簡單達成愈好(text-align: center 會 比diplay:flex;justify-content:center; 好)
5. float / inline-block / flex，**在排版時最忌諱混用，造成網頁複雜度**，要就整個頁面擇一使用
6. Logo圖 h1>a>img (h1是為了SEO)
7. Div不具有語意性，所以當在排版的時候若有語意建議還是不要用div
8. 語意類的class放前面/工具類的class放後面
## 語錄
> 不要亂加語法買保險

## 部分內容引用於
六角學院 - 網頁切版直播班協作手冊
https://hackmd.io/@YmcMgo-NSKOqgTGAjl_5tg/HJpJk8ABU/%2F91FvxC-qToC_mdk2jhldAg

###### tags: `切版直播班`