為 Interview Bit 的第 34 題。

使用時機

Flexbox

• 通過空間的分配和alignment，屬於一維空間的排版
• 並不用使用過多的 float 或是 position 控制，即可完成一樣的效果

Grid

• 可以使用 row 或是 column，定義二維空間的排版

以下幾個點討論 flexbox 和 grid 不同的地方：

Child Elements 的控制

Flexbox

CodePen 範例

Flexbox 的子項目有很大的權限。

例如在設定 display: flex 的時候， flex 底下如果想要等寬的 3 個 column，設定 display: flex 是不足夠的，需要再設定 flex-item 的 flex: 1 或是 flex-item 的 width: 100%。

尚未設定 flex: 1

已設定 flex: 1

Grid

Parent element 有較大的權限控制 Grid。
例如想要讓 Grid item 都要等寬，可以在 parent 的設定 grid-template-columns: 1fr 1fr 1fr;

CodePen 範例

固定 width 和 width: auto

CodePen 範例

.intrinsic-size {
    width: auto;
}
.extrinsic-size {
    width: 500px;
}

• intrinsic-size：表示高度和寬度是由內容判斷。
• extrinsic-size：表示先限制高度和寬度，內容只能在這一個範圍裡面。

Flexbox 使用元素的高度和寬度計算 flex 的 growing and shrinking。

當使用 display:flex, 元素大小是依照元素內容的高和寬。

可以看到綠色框框都是依照元素的高和寬做大小設定，因此每一個都大小都不一樣。

但是當使用 display: grid，每一個 column 都會占用 full-width，除非將 grid parent 元素設定固定寬度。

瀏覽器支援度

現在的瀏覽器如果不是使用 IE ，大部分都會支援 Flexbox 或是 Grid。詳細的資料可以上 Can I Use...? 了解

Flexbox

Can I Use CSS Flexbox

Grid

Can I Use CSS Grid

參考資料：
CSS Grid vs Flexbox - A brief guide