# T3：Bootstrap5 Grid System vs. Grid vs. Flexbox
###### tags: `好想工作室`
2022.08.01（Mon.）

> 參考資料：[flexbox froggy](https://flexboxfroggy.com/)（可以學flex使用又很可愛的小遊戲）

> 參考資料：[[Day01] 請問你掉的是 Flexbox 還是 Grid ？](https://ithelp.ithome.com.tw/articles/10237491)
> 參考資料：[(5) Bootstrap 網格系統 (Grid)](https://medium.com/ivycodefive/5-bootstrap-%E7%B6%B2%E6%A0%BC%E7%B3%BB%E7%B5%B1-grid-be5779287231)
> 參考資料：[Bootstrap Grid System](https://getbootstrap.com/docs/5.2/layout/grid/)
> 參考資料：[Flex or Flexbox — A Flexible CSS Layout](https://medium.com/@PraveenPoonia/flexbox-a-flexible-css-layout-cd3e9da0c8f2)
> 參考資料：[Intro to Flexbox - Part 1](http://www.lukewilson.net/2017/02/06/Intro-to-Flexbox/)
> 參考資料：[CSS Flexbox vs. CSS Grid](https://levelup.gitconnected.com/when-to-use-css-flexbox-vs-grid-or-both-c1a5f01dc88a)

## Bootstrap5 Grid System
* 官方文件一開始就提到Bootstrap的網格系統（Grid System）是由flexbox建構的：


* 文件中有推薦給對flexbox不熟或是第一次碰到的新手一篇flexbox教學：[A Complete Box of Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background)

## Flexbox
從這篇 [A Complete Box of Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background) 整理一些重點出來。

* **Background**

* flexbox被發明出來的原因，主要是為了更有效的去排版、對齊、分配空間給容器（container）中的內元件（item）。

* flex 排版主要作法是使容器有能力去改變他裡頭元素的寬高，例如說flex 容器可以將裡頭內元件給擴張（expand）去填滿空間;可以將裡頭元素給縮小（shrink）來避免溢出（overflow）情況發生。

* flexbox的排版是"direction-agnostic"，"agnostic"中文是「不可知論」，也就是不為人知或是根本無法知道的意思。

所以direction-agnostic合起來大概可以理解成flexbox排版的方向是無從得知的（雖然他有default從左到右排列，但他不一定一直都會是這樣的排法），不像block排版為垂直堆疊、inline排版為水平排列。

flexbox擁有direction-agnostic這樣的特性，讓flexbox排版時可以改垂直（column）或水平（row）方向，也可以做反轉（reverse），都不會改動到內容。

* flexbox比較適合用於小規模的排版;grid比較適合用於大規模的排版。另外flexbox是一維（只有x軸）;grid是二維（有x,y軸）

* **Flexbox Properties**

* **總覽：**

| | flex container | flex items |
| ---------- | -------------- | ---------- |
| properties | 1. display <br> 2. flex-flow <br> > 2-1. flex-direction <br> > 2-2. flex-wrap <br> 3. justify-content <br> 4. align-items <br> 5. align-content <br> 6. gap,row-gap,column gap| 1. order <br> 2. flex <br> > 2-1. flex-grow <br> > 2-2. flex-shrink <br> > 2-3. flex-basis <br> 3. align-self |

* **Properties for the Parent（flex container）：**
1. display
2. flex-flow
* flex-direction
* flex-wrap
3. justify-content
4. align-items
5. align-content
6. gap, row-gap, column gap

* **Properties for the Children（flex items）：**
1. order
2. flex
* flex-grow
* flex-shrink
* flex-basis
3. align-self

**＊ 上面詳細的資料可參考：**
1. [圖解：CSS Flex 屬性一點也不難](https://www.casper.tw/css/2017/07/21/css-flex/)
2. [flexbox properties](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flexbox-properties)
3. [CSS 原理 - Flex(上)](https://yachen168.github.io/article/Flex.html)
4. [前端新手村 flex (上)](https://ithelp.ithome.com.tw/articles/10194244)