# CSS3 Flexbox 排版屬性簡介

> **參考資源 :**
> [Flex 常見排版範例](https://w3c.hexschool.com/flexbox/a0979749)
> [圖解：CSS Flex 屬性一點也不難](https://wcc723.github.io/css/2017/07/21/css-flex/)
> [CSS 盒模型Box-Model和字型等設定](https://www.notion.so/2021-03-03-CSS-Box-Model-daf6107f60af4db0a48c7838ac50366c)
> [Css介紹](https://www.notion.so/Css-e24369b24e7a4890a663d51e0238122c)
> [flexbox教學](https://www.notion.so/flexbox-891100ec326b4c0188c4e5d5bfd9a5ad)

### 外層屬性 (container)

**display (必備屬性 ) :**

- **flex-flow** : flex-direction + flex-wrap
- **flex-direction** : 決定flex軸線 (配合軸線置中思考如何使用)
- **flex-wrap** : 決定換行的屬性

**justify-content** : **主要軸線**的對齊 (水平置中用)

**align-items** : **交錯軸線**的對齊 (垂直置中用)

### 內層屬性

**flex :**

* **flex-grow** : 伸縮比
* **flex-shrink** : 收縮比
* **flex-basis** : 絕對值

**order** : 排序

**align-self** : 單一物件的交錯軸對齊

### 補充:

- 行距**line-height**為減去**font-size**後除以2後，分布於文字上下的距離 (可用倍數或直接設定px)
- **display** 可用於將block改為inline或inline改為block
- **height** 可依內容自動增加，盡量不要自行設定高度
- **font-size** 網頁預設16px
- div為區塊元素預設為上到下(內部也是) ，如需並排可直接下`display:flex`
- 欲使用`position:absolute`需在父層設`position:relative`後可使用top,right,left,bottom將值設為0推至端點(網頁預設皆為左上開始)(設定負值可超出父層)
- 圖片盡量使用img插入之後會比較好處理