---
# System prepended metadata

title: CSS FLEXBOX
tags: ['HTML, CSS']

---

# CSS FLEXBOX 
---
tags: HTML CSS relate
---

###### tags: `HTML, CSS`


[參考影片網址](https://www.youtube.com/watch?v=JJSoEo8JSnc&ab_channel=TraversyMedia)


## 優點們:

* 沒有 floats
* RWD 有 且行動裝置友善
* 定位子層更容易
* Flex's container margin don't collapse with the margin of its contents.
* 元素的順序可以簡單地被更改且不需要更改HTML的原始碼


-----
## Flex properties

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


------

可以這樣設定一個兩倍寬其它就照比例分下去:


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


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


------------------

使用order這個屬性後可以讓他們的順序更改:

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


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


----------

## align-item的應用


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

下方圖片是 flex-end
![](https://i.imgur.com/Ho2805Y.png)

下方圖片是 flex-start
![](https://i.imgur.com/ghkHKHc.png)

下方圖片是 center
![](https://i.imgur.com/kmacExp.png)




----------------


flex-direction:column
變成垂直

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


--------------

## justify-content的一些屬性使用

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



讓欄位偏左可以使用: justify-content: flex-start

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

讓欄位偏右可以使用: justify-content: flex-end

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

讓欄位置中可以使用: justify-content: center

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

讓欄位中間有空間但是兩邊沒有: justify-content: space-between

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

讓欄位兩邊以及中間都有空間: justify-content: space-around

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


---------------



## 讓物件可以換行使用: flex-wrap:wrap



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