簡評：近些年 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)站原型
