Flexbox ❤️ CSS Grid

公司福利：不需支援連 Flexbox 都不能用的瀏覽器。

有個面試題沒有答好：

Flexbox 與 CSS Grid 有什麼區別？

我才發現自己沒有搞懂兩者。最近玩了 Flexbox Froggy 與 Grid Garden 才有了點頭緒。

簡單來說

Flexbox 是以線性操作為單位。
CSS Grid 則用面的操作為單位。

Flexbox 有線、有方向。你可以決定這條線該從哪裡出發、哪裡結束、如何斷行……這種操作讓我想起 float 與 inline-block：你需要讓子元素乖乖排隊，但往往會讓父元素崩潰……Flexbox 就是要解決這種問題；<br />相較之下，CSS Grid 則有欄、有列。你需要做的是決定子元素該放在哪個欄、還有哪個列。這種哲學我想起更古老的 <table> 排版，但在 CSS Grid 之下的 HTML 乾淨許多。

那麼 CSS Grid 是取代 Flexbox 的嗎？<br />並不是。

簡易實做

要講明理由，我需要請出 Windows Server 的 IIS 預設畫面：

IIS 8.5 預設畫面

我們拿例子最左上角的三個方塊好了。這裡面有英語、日語、還有義大利語。三者方塊除了大小不同，位置也不同。另外，文字還需要對齊。於是我們的排版出現以下任務：

定義方塊大小
定義方塊位置
方塊文字垂直對齊

定義方塊大小

定義方塊大小無論如何都能辦到，只是對應屬性不同。

純 Flexbox

如果純用 Flexbox，垂直對齊無疑很簡單：

.parent
{
    display:flex;
    flex-direction:column-reverse;
}

但定義方塊位置就會很彆扭了。warp 不完。

純 CSS Grid

在定義位置方面，CSS Grid 也很簡單：

.parent
{
    display:grid;
    grid-template-columns:repeat(4,80px);
    grid-template-rows:repeat(4,80px);
}

.child
{
    grid-column: 1/3;
    grid-row: 1/3;
}

但如果要垂直對齊文字，CSS Grid 也同樣彆扭。

See the Pen aYYGZX by iigmir (@iigmir) on CodePen.

所以，這兩個各有長處。誰也不是來取代誰、而是利用自身的長處，彌補對方的短絀。

最後以一段歌詞做結：