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

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

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

## 重點
* flex 只影響到下一層
* flex 裡面還可以包 flex
以navbar 為例，最外層下一個 `display: flex`，右邊區塊再下一個 `display: flex` 讓內層 `li` 並排 <hr> <hr>  <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)