---
# System prepended metadata

title: flexbox 是什麼
tags: [共筆]

---

## 什麼是 flexbox?
Flexible Box Layout Module (彈性盒子排版模組) 簡稱 flexbox，有一系列的屬性設定，讓排版變得簡單很多。


## `display: flex` 使用 flexbox 
外容器加上 `display: flex`，效果會作用在第一個內層上。

* 絕對不要因為害怕沒效果，加在所有內層元素!!


## 重點
* flex 只影響到下一層
* flex 裡面還可以包 flex
	以navbar 為例，最外層下一個 `display: flex`，右邊區塊再下一個 `display: flex` 讓內層 `li` 並排 <hr>![](https://hackmd.io/_uploads/Sk3_nuz5h.png) <hr> ![](https://hackmd.io/_uploads/Bymf6_z53.png) <hr> [時光屋範例 Jason Wang](https://codepen.io/JW750625/pen/oNXQyWK)


## 參考來源
* [Flexbox 是甚麼](https://w3c.hexschool.com/flexbox/2186a786)
* [Basic concepts of flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)
* [emmet cheatsheet](https://docs.emmet.io/cheat-sheet/)
* [In-depth introduction to flexbox](https://www.trustbit.tech/blog/2021/05/21/in-depth-introduction-to-flexbox)
* [flexbox: Difference between align-items and align-content](https://www.holadevs.com/pregunta/76655/flexbox-difference-between-align-items-and-align-content)

