---
# System prepended metadata

title: Flexbox
tags: [Flexbox]

---

# Flexbox
###### tags: `Flexbox`
Flexbox是Bootstrap4的基礎，整個bs4都是基於flexbox改寫的，傳統div/span：
![](https://i.imgur.com/p8N0dGL.png)

Flexbox排版系統裡面只分為兩個，分別是flex container與flex items：
![](https://i.imgur.com/flZORD7.png)

另外，還使用軸線，分為main axis與cross axis，也就是x軸於y軸，用來作為對齊的依據：
![](https://i.imgur.com/SaVpeEC.png)

Flexbox也能輕鬆地分配剩餘的空間：
![](https://i.imgur.com/PKe3r5T.png)

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

### flex container可以下的css
![](https://i.imgur.com/23rar4X.png)

#### flex-direction
負責控制main axis與cross axis的走向，總共可以設定４個值，預設為row：
![](https://i.imgur.com/ByBXSZK.png)

row(上到下，左到右主軸)：
![](https://i.imgur.com/CNNNXC0.png)

row-reverse(右到左主軸，還是上到下)：
![](https://i.imgur.com/3Dc2OxD.png)

column代表主軸是上到下，cross axis會與他垂直(上到下主軸，左到右)：
![](https://i.imgur.com/2Vo9SWw.png)

column-reverse(下到上主軸，左到右)：
![](https://i.imgur.com/cre8vwy.png)

#### flex-wrap
分為3個值，不包覆、包覆、反過來包覆：
![](https://i.imgur.com/iIEhKJc.png)

nowrap，超過範圍就不包：
![](https://i.imgur.com/avrFSH4.png)

wrap，超過沒關係，一樣包，自動調整：
![](https://i.imgur.com/YjSbga3.png)

wrap-reverse，反過來包，不常用：
![](https://i.imgur.com/NBSK1r2.png)

### 對齊類
#### justify-content
為"對於整陀content來說，對齊main axis的方式"，值可以分為以下這些：
![](https://i.imgur.com/uuAEVAu.png)

flex-start(default)：
![](https://i.imgur.com/Sugq3Tj.png)

flex-end：
![](https://i.imgur.com/BaWFFNX.png)

center：
![](https://i.imgur.com/TOurOuf.png)

space-between(把多餘的空間擺在item之間)：
![](https://i.imgur.com/7jeEQeM.png)

space-around(把多餘的空間擺在items周圍)：
![](https://i.imgur.com/AeUZlog.png)

space-evenly(很平均的分散剩餘的空間)：
![](https://i.imgur.com/2Oauzkb.png)

#### align-items
為"每一個items去對齊cross axis的方式"，值可以分為以下這些：
![](https://i.imgur.com/8pbX6Dy.png)

flex-start，對齊cross axis的頭：
![](https://i.imgur.com/pW6pxGp.png)

flex-end，對齊cross axis的尾：
![](https://i.imgur.com/PeAdxwf.png)

center：
![](https://i.imgur.com/rCPm9Ww.png)

baseline，對齊文字的底部：
![](https://i.imgur.com/oDOjJZY.png)

stretch(default)，讓同一排的高度會一樣：
![](https://i.imgur.com/JbK7216.png)

範例，傳統作法，高度會不一樣：
![](https://i.imgur.com/bRPF0UH.png)

#### align-content
為"整陀content對齊cross axis的方式"，值可以分為以下這些：
![](https://i.imgur.com/KQfrQHN.png)

flex-start：
![](https://i.imgur.com/KNSBvfQ.png)

flex-end：
![](https://i.imgur.com/PcklHX8.png)

center：
![](https://i.imgur.com/9PMLLth.png)

space-between：
![](https://i.imgur.com/Lz5Vs8i.png)

space-around：
![](https://i.imgur.com/9eOEiyf.png)

stretch(default)：
![](https://i.imgur.com/VjlE0je.png)

## Flex items
### flex items可以下的css
![](https://i.imgur.com/K48nFFg.png)

#### align-self
為"我們要設定的那個item，對齊cross axis的方式"，與align-items不一樣的是，一個是針對所有容器設定，一個是針對個別items設定，所以也可以用self來覆寫對齊設定，有以下值可以設定：
![](https://i.imgur.com/UrvXIRh.png)

auto(default)：
![](https://i.imgur.com/p4VedYi.png)

flex-start：
![](https://i.imgur.com/3fBQvJa.png)

flex-end：
![](https://i.imgur.com/Y8BhPoD.png)

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

#### flex-grow / flex-shrink / flex-basis
flex-grow：後面要接數字，代表會自動成長來填滿剩餘的空間，也就是把剩下的空間拿來平分：
![](https://i.imgur.com/jWznvf0.png)

![](https://i.imgur.com/ZrPKy2A.png)

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

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

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

flex-basis：很像在設定寬度，但還會受到剩餘空間分配的影響，預設值是auto，會依照flex-grow去設定，也可以設定其他寬度單位：
![](https://i.imgur.com/kJaxNUo.png)

以上可以寫在一起，只用flex代替，會自動判斷：
![](https://i.imgur.com/vkTRlge.png)

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

#### order
傳統HTML是誰先寫誰就出現，但是在flexbox系統裡，可以透過order來直接設定順序：
![](https://i.imgur.com/9qdatuX.png)
預設值是0，他是用比較級去決定，只要比他大就在他後面，比他小就在他前面。
