# Flexbox
###### tags: `Flexbox`
Flexbox是Bootstrap4的基礎，整個bs4都是基於flexbox改寫的，傳統div/span：

Flexbox排版系統裡面只分為兩個，分別是flex container與flex items：

另外，還使用軸線，分為main axis與cross axis，也就是x軸於y軸，用來作為對齊的依據：

Flexbox也能輕鬆地分配剩餘的空間：

## flex container
### display:flex
如果將display宣告為flex，則代表為flex container，其裡面的內容自動變成flex items。

### flex container可以下的css

#### flex-direction
負責控制main axis與cross axis的走向，總共可以設定４個值，預設為row：

row(上到下，左到右主軸)：

row-reverse(右到左主軸，還是上到下)：

column代表主軸是上到下，cross axis會與他垂直(上到下主軸，左到右)：

column-reverse(下到上主軸，左到右)：

#### flex-wrap
分為3個值，不包覆、包覆、反過來包覆：

nowrap，超過範圍就不包：

wrap，超過沒關係，一樣包，自動調整：

wrap-reverse，反過來包，不常用：

### 對齊類
#### justify-content
為"對於整陀content來說，對齊main axis的方式"，值可以分為以下這些：

flex-start(default)：

flex-end：

center：

space-between(把多餘的空間擺在item之間)：

space-around(把多餘的空間擺在items周圍)：

space-evenly(很平均的分散剩餘的空間)：

#### align-items
為"每一個items去對齊cross axis的方式"，值可以分為以下這些：

flex-start，對齊cross axis的頭：

flex-end，對齊cross axis的尾：

center：

baseline，對齊文字的底部：

stretch(default)，讓同一排的高度會一樣：

範例，傳統作法，高度會不一樣：

#### align-content
為"整陀content對齊cross axis的方式"，值可以分為以下這些：

flex-start：

flex-end：

center：

space-between：

space-around：

stretch(default)：

## Flex items
### flex items可以下的css

#### align-self
為"我們要設定的那個item，對齊cross axis的方式"，與align-items不一樣的是，一個是針對所有容器設定，一個是針對個別items設定，所以也可以用self來覆寫對齊設定，有以下值可以設定：

auto(default)：

flex-start：

flex-end：

center、baseline、stretch則與上面大同小異。

#### flex-grow / flex-shrink / flex-basis
flex-grow：後面要接數字，代表會自動成長來填滿剩餘的空間，也就是把剩下的空間拿來平分：


後面的數字代表，每個item要拿幾份，1就是一份，2就是兩份，因為item可以個別設定。

flex-shrink：與flex-grow相反，0就是不會自動縮小，1就是會自動縮小(default)，當超過空間時，會自動把內容縮小，但如果真的太多，無法縮減還是會爆掉。

通常會是nowrap的情況下，因為nowrap不會自動換行，只會在同一行盡量塞，才會用到shrink。

flex-basis：很像在設定寬度，但還會受到剩餘空間分配的影響，預設值是auto，會依照flex-grow去設定，也可以設定其他寬度單位：

以上可以寫在一起，只用flex代替，會自動判斷：

保留字：
initial(default) - 0 1 auto
none - 0 0 auto
auto - 1 1 auto

#### order
傳統HTML是誰先寫誰就出現，但是在flexbox系統裡，可以透過order來直接設定順序：
預設值是0，他是用比較級去決定，只要比他大就在他後面，比他小就在他前面。