# Flexbox

###### tags: `CSS` `tool`

為什麼要有flexbox:

Ans: 為了自由運用分配剩餘的空間,而不要一直用col,div等等

我這邊要引用下大神的話:
> 以前很困擾的問題是，到底某屬性是下在外容器還是內元素，今天才發現其實子元素能設的有限，只有 order、align-self、flex… 大部分都是在==外容器==上操作。

要理解 flexbox 最快的還是看圖片，推薦此範例：[Codpen - handy flexbox tool](https://codepen.io/vailjoy/live/pRgYbw)，很方便連字都不用打哈哈哈

有些部分大神歸納的蠻清楚的,有時間再回來看.

[大神的blog](https://yakimhsu.com/project/project_w6_CSS_flex.html)

## flexbox的組成:
1. flex container/ flex items

2. main axis/cross axis
- 預設main axis是水平線,cross axis是垂直線
- 若flex-direction:column 則情況會反過來


> 15天 align-content 在第5:00開始有複習所有的概念

## flex-container （在container底下下css)

### css的屬性如下

1. flex-direction(控制走向) 比較少去動它
- row (預設)
- row-reverse
- column
- column-reverse

2. flex-wrap(把flex-items塞在同一行裡面) 蠻常動他的
- nowrap (預設) 不換行
- wrap 換行
- wrap-reverse(不太常用)
使用時機:三欄式版型會用到

## 對齊類

### justify-content 掌管左右

整坨去對齊主軸(main axis)

- flex-start （預設,要看原本的direction是什麼方向）
- flex-end
- flex-center
- space-between （多餘的空間放在彼此之間）=>直接放左右邊際線
- space-around (旁邊都會塞剩餘的空間)
- space-evenly （等分空間）

### align-items 掌管上下

每一個item去對齊cross-axis的頭

- flex-start
- flex-end
- flex-center
- baseline 對齊文字的底線
- stretch 預設值,不需要再用高度撐開自己的高度,直接對container下flex, 高度就會延展成等高

### align-content **要在有剩餘空間的狀態下才看的到效果** 在wrap(換行下)狀態下才有效果

整陀去對齊cross axis的頭

- flex-start
- flex-end
- flex-center
- space-between
- baseline 對齊文字的底線
- stretch 預設值,不需要再用高度撐開自己的高度,直接對container下flex, 高度就會延展成等高

## flex items: (在items底下下css,像是獨立個體的設定)

1. align-self
- auto (預設)
- flex-start
- flex-end
- center
- baseline
- stretch

2. flex

- grow + number

- `flex-grow:0`(預設)
- `flex-grow:1`(自動成長,並填滿空間)
1以上就是剩下的空間有多少,把最多的分配給倍數最多的items,
其他items自己拿一份

> 15天 flex 8分鐘開始有比較詳細的說明, 一般來說都是1

- shrink + number

- `flex-shrink:1`(預設為自動縮減)但是內容多的話,還是會爆掉的.(nowrap狀況下)
- `flex-shrink:0` 不會自動縮減,會直接爆掉(nowrap狀況下)

若是在wrap的狀況底下,會直接換行

- basis
- auto (預設)
- 百分比:20%
- 定值:100px;
- 5rem

實務上的用法

<flex-grow><flex-shrink><flex-basis>

可以寫成
flex: initial
那就是預設值

flex-grow:0
flex-shrink:1
flex-basis:auto

---

可以寫成
flex: none

flex-grow:0
flex-shrink:0
flex-basis:auto

---

可以寫成
flex: auto

flex-grow:1
flex-shrink:1
flex-basis:auto

---

## order (可以指定出現的順序）
- order:0 (預設)
- order: -1 (這樣會在最前面)
- order: 5 （這樣會在最後面）

在做rwd時,偶爾需要調動他的次序,這時候order就很好用