簡評：近些年 CSS Flexbox 在前端開發(fā)者中變得非常流行。其實并不奇怪，它能讓我們更容易創(chuàng)建出動態(tài)布局，以及在容器中對其內容。然而城里新來了個小伙叫 CSS Grid，它有許多彈性盒的能力，有時候比彈性盒好用，有時候卻不好用。作者點評了彈性盒、網(wǎng)格兩者之間的差異，以及什么時候用哪種比較好。
先來看下這節(jié)課的截屏預告：
一維 VS 二維
如果你想從這篇文章中學到精髓，下面的就是：
Flexbox 是為一維布局設計的，而 Grid 是為二維布局設計。
這意味著如果你想要在一個方向上放置項目（比如在標題欄中有三個按鈕），那么你應該用Flexbox：
它會比 CSS Grid 更加靈活，同時只需要更少的代碼，更容易維護。
然而，當你需要在兩個維度 —— 行和列上創(chuàng)建整個布局時，那么你應該使用 CSS Grid：
這種情況下， CSS Grid 會更加靈活，讓你的標記更加簡單。代碼也更容易維護。
當然你可以結合兩者使用。上面的例子中將會完美地使用 Grid 做頁面布局，用 Flexbox 來對齊標題欄中的內容。在文末，我會確切地展示如何做到這點。
內容優(yōu)先 VS 布局優(yōu)先
另一個核心區(qū)別在于：Flexbox 以內容為基礎，而 Grid 以布局為基礎。這看起來有點抽象，所以讓我們來看看確切地例子，這會更容易理解。
我們會使用之前的 header， HTML 代碼如下：
<header>
<div>Home</div>
<div>Search</div>
<div>Logout</div>
</header>
在我們進入 Flexbox 布局之前，這些 div 是相互疊在一起的：
Flexbox header
然而，當我們給一個 display: flex 樣式時，這些元素就會排成一行。
header {
display: flex;
}
為了將登出按鈕移動到最右邊，我們只需要找到那個元素，然后給一個外邊距：
header > div:nth-child(3) {
margin-left: auto;
}
結果如下：
這里我希望你們注意一下：我們讓這些元素自己決定它們該如何放置。除了最初的 display: flex; 我們不需要預定義任何東西。
這是 Flexbox 和 Grid 的核心差異，當我們用 Grid 重新創(chuàng)建 header 時，這點會更明顯。
即便 CSS Grid 不是用來創(chuàng)建一維的 header，它在這篇文章中仍然是一個很好的練習，讓我們明白 Flexbox 和 Grid 的核心差異。
Grid header
使用 CSS Grid，我們可以有好幾種方式來創(chuàng)建 header。我將使用相當直接的一種，我們的網(wǎng)格有 10 列，每列寬度為 1 個單元：
header {
display: grid;
grid-template-columns: repeat(10, 1fr);
}
和 Flexbox 的方案看起來完全一樣。
但是，我們可以看看底下有哪些不同。我們將使用 Chrome 檢查器來檢查列：
關鍵不同在于這種方式先定義了列 —— 即布局。我們先定義了列的寬度，然后把內容放到可用的網(wǎng)格里。
這種方式迫使我們將 header 分割成多少列。
除非我們改變網(wǎng)格，我們被 10 列網(wǎng)格限制了。而使用 Flexbox 則不會面臨這種限制。
為了將登出按鈕放到最右邊，我們需要把它放在第 10 列：
header > div:nth-child(3) {
grid-column: 10;
}
檢查網(wǎng)格時看起來是這樣：
我們不能簡單地給一個 margin-left: auto; 因為登出按鈕已經(jīng)被放在布局中的確切的格子中，在第三列。為了移動它，我們要找到另一個格子。
結合兩者
現(xiàn)在看下如何將兩者結合起來，將我們的 header 合并到我們的網(wǎng)站布局。我們從構建網(wǎng)站布局開始：
HTML 標記：
<div class="container">
<header>HEADER</header>
<aside>MENU</aside>
<main>CONTENT</main>
<footer>FOOTER</footer>
</div>
CSS ：
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 50px 350px 50px;
}
項目樣式：
header {
grid-column: span 12;
}
aside {
grid-column: span 2;
}
main {
grid-column: span 10;
}
footer {
grid-column: span 12;
}
現(xiàn)在添加 header。我們把 header —— CSS Grid 中的一個項目轉換為 Flexbox 容器。
header {
display: flex;
}
現(xiàn)在可以把登出按鈕設置到右邊了：
header > div:nth-child(3) {
margin-left: auto;
}
現(xiàn)在兩個容器看起來是這樣的：
現(xiàn)在你應該深刻地理解了 Flexbox 和 Grid 的不同之處，并且知道如何使用它們了。
瀏覽器支持
最后，我想提一下瀏覽器支持。在寫這篇文章時，全球網(wǎng)站流量的 77% 支持 CSS Grid，并且還在增加。我相信 2018 將會是 CSS Grid 時代，它會有一個突破，并成為前端開發(fā)者的必備技能。就像前幾年的 CSS Flexbox 那樣。源代碼鏈接
英文原文：The ultimate CSS battle: Grid vs Flexbox
舊文推薦： 如何用 CSS 網(wǎng)格快速做出網(wǎng)站原型
