Flexbox: 用於單一方向的排版 ( 元素們排列於同一個方向[水平 ｜垂直] )，通常會拿來作為排版上的細節微調( 間距、對齊方式 )。
Grid: 可同時操作水平與垂直方向的元素。（ 如果已經先有桌機和手機的 UI 稿，可以先對稿進行觀察，是否有需要 grid 實作的元件）
Flexbox 起手式
display: flex
將該元素宣告為 flex container，而在這個 container 裡頭的所有子元素就會成為 flex item，這些 item 可以利用 flex 相關屬性來指定他們排列的方向、順序，以及彼此對齊的方式，或尺寸比例。
預設屬性：
- item 水平方向排列
- 若 item 沒有已經先定義的寬高，其大小就會變成該元素中內容的大小
- item 若比 flex container 還要寬，會自適應縮小其寬度，不會溢出 flex container
flex-direction ( 也可以說是 main axis 的指向 )
item 的排列方向
- row ( 水平左至右 )
- column ( 垂直上至下 )
- row-reverse ( 水平右至左 )
- column-reverse ( 垂直下至上 )
flex-wrap
wrap 有包起來的意思
- no-wrap [ 預設值 ] 表示 當 item 碰到 flex container 的邊界( 要超過容器範圍時 )，會以縮小自己的尺寸來乖乖排列在 flex container 裡。但要注意若是 item 有設定min-width(height)，item 就不會自適應縮小，而是直接超出容器範圍。
- wrap ( item 超過容器邊界則自動換到下一行排列 )
- wrap-reverse ( 反方向遇邊界換行 )
flex item 的排列方式
在 flexbox 的系統中，主要是由兩條軸線來決定排列的操作會如何進行
- main axis 主軸
- cross axis 就且叫他副軸好了
決定現在誰是 main 而誰是 cross 的，要從 flex-direction 來決定。例如現在設定 flex-direction: row ，表示 main axis 會是一條由左指向右的水平線 ; 反之設定 flex-direction: column，則 main axis 會變成一條由上只到下的垂直線。
< — 以下使用 flex-direction: row 為例 — >
justify-content : 控制 主軸上 item 的對齊方式
- flex-start [ 預設值 ] item 於容器左邊靠攏排列 ( main start )
- flex-end ( item 於容器右邊靠攏排列 ( main end ) )
- center ( item 靠攏排列於 主軸線 的中間( 就是置中的意思 ) )
- space-between ( 最左邊和最右邊的 item 會各自貼齊 容器邊界(main start 和 main end )，剩餘空間會平均分配 item，讓彼此的間距相等 )
- space-around ( item 被平均分配，item 彼此的間距 為 兩邊 item 與 flex container 的間距的 2倍 )
- space-evenly ( item 被平均分配，item 彼此的間距和 兩邊 item 與 flex container 的間距 相等 )
align-items : 控制 副軸上 item 的對齊方式
- stretch [ 預設值 ] 將 item 撐開至 flex container 的高度
- flex-start ( item 排列於容器最上方 ( cross start ) )
- flex-end ( item 排列於容器最下方( cross end ) )
- center ( item 排列於 副軸線 的中間( 也是置中的意思 ) )
- baseline ( 依照所有 item 的內容作為基準線進行排列 )
align-self : 對指定 item 覆寫在 align-items 就已經設定的屬性
*也就是說這個屬性要下在 item 上才能發揮作用喔！
align-content
