CSS 終極之戰：Grid VS Flexbox

簡評：近些年 CSS Flexbox 在前端開發者中變得非常流行。其實並不奇怪，它能讓我們更容易創建出動態布局，以及在容器中對其內容。然而城裡新來了個小伙叫 CSS Grid，它有許多彈性盒的能力，有時候比彈性盒好用，有時候卻不好用。作者點評了彈性盒、網格兩者之間的差異，以及什麼時候用哪種比較好。

先來看下這節課的截屏預告：

一維 VS 二維

如果你想從這篇文章中學到精髓，下面的就是：

Flexbox 是為一維布局設計的，而 Grid 是為二維布局設計。

這意味著如果你想要在一個方向上放置項目（比如在標題欄中有三個按鈕），那麼你應該用Flexbox：

它會比 CSS Grid 更加靈活，同時只需要更少的代碼，更容易維護。

然而，當你需要在兩個維度 —— 行和列上創建整個布局時，那麼你應該使用 CSS Grid：

這種情況下， CSS Grid 會更加靈活，讓你的標記更加簡單。代碼也更容易維護。

當然你可以結合兩者使用。上面的例子中將會完美地使用 Grid 做頁面布局，用 Flexbox 來對齊標題欄中的內容。在文末，我會確切地展示如何做到這點。

內容優先 VS 布局優先

另一個核心區別在於：Flexbox 以內容為基礎，而 Grid 以布局為基礎。這看起來有點抽象，所以讓我們來看看確切地例子，這會更容易理解。

我們會使用之前的 header， HTML 代碼如下：

<header>n <div>Home</div>n <div>Search</div>n <div>Logout</div>n</header>n

在我們進入 Flexbox 布局之前，這些 div 是相互疊在一起的：

Flexbox header

然而，當我們給一個 display: flex 樣式時，這些元素就會排成一行。

header {n display: flex;n}n

為了將登出按鈕移動到最右邊，我們只需要找到那個元素，然後給一個外邊距：

header > div:nth-child(3) {n margin-left: auto;n}n

結果如下：

這裡我希望你們注意一下：我們讓這些元素自己決定它們該如何放置。除了最初的 display: flex; 我們不需要預定義任何東西。

這是 Flexbox 和 Grid 的核心差異，當我們用 Grid 重新創建 header 時，這點會更明顯。

即便 CSS Grid 不是用來創建一維的 header，它在這篇文章中仍然是一個很好的練習，讓我們明白 Flexbox 和 Grid 的核心差異。

Grid header

使用 CSS Grid，我們可以有好幾種方式來創建 header。我將使用相當直接的一種，我們的網格有 10 列，每列寬度為 1 個單元：

header {n display: grid;n grid-template-columns: repeat(10, 1fr);n}n

和 Flexbox 的方案看起來完全一樣。

但是，我們可以看看底下有哪些不同。我們將使用 Chrome 檢查器來檢查列：

關鍵不同在於這種方式先定義了列 —— 即布局。我們先定義了列的寬度，然後把內容放到可用的網格里。

這種方式迫使我們將 header 分割成多少列。

除非我們改變網格，我們被 10 列網格限制了。而使用 Flexbox 則不會面臨這種限制。

為了將登出按鈕放到最右邊，我們需要把它放在第 10 列：

header > div:nth-child(3) {n grid-column: 10;n}n

檢查網格時看起來是這樣：

我們不能簡單地給一個 margin-left: auto; 因為登出按鈕已經被放在布局中的確切的格子中，在第三列。為了移動它，我們要找到另一個格子。

結合兩者

現在看下如何將兩者結合起來，將我們的 header 合併到我們的網站布局。我們從構建網站布局開始：

HTML 標記：

<div class="container">n <header>HEADER</header>n <aside>MENU</aside>n <main>CONTENT</main>n <footer>FOOTER</footer>n</div>n

CSS ：

.container {n display: grid; n grid-template-columns: repeat(12, 1fr);n grid-template-rows: 50px 350px 50px;n}n

項目樣式：

header {n grid-column: span 12;n}naside {n grid-column: span 2;n}nmain {n grid-column: span 10;n}nfooter {n grid-column: span 12;n}n

現在添加 header。我們把 header —— CSS Grid 中的一個項目轉換為 Flexbox 容器。

header {n display: flex;n}n

現在可以把登出按鈕設置到右邊了：

header > div:nth-child(3) {n margin-left: auto;n}n

現在兩個容器看起來是這樣的：

現在你應該深刻地理解了 Flexbox 和 Grid 的不同之處，並且知道如何使用它們了。

瀏覽器支持

最後，我想提一下瀏覽器支持。在寫這篇文章時，全球網站流量的 77% 支持 CSS Grid，並且還在增加。我相信 2018 將會是 CSS Grid 時代，它會有一個突破，並成為前端開發者的必備技能。就像前幾年的 CSS Flexbox 那樣。源代碼鏈接

原文鏈接：The ultimate CSS battle: Grid vs Flexbox

推薦閱讀：

• 如何用 CSS 網格快速做出網站原型

極光日報，極光開發者旗下媒體。

每天導讀三篇英文技術文章。