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>
    <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 從新建立 header 時，這點會更明顯。

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

Grid header

使用 CSS Grid，咱們能夠有好幾種方式來建立 header。我將使用至關直接的一種，咱們的網格有 10 列，每列寬度爲 1 個單元：

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

和 Flexbox 的方案看起來徹底同樣。

可是，咱們能夠看看底下有哪些不一樣。咱們將使用 Chrome 檢查器來檢查列：

關鍵不一樣在於這種方式先定義了列 —— 即佈局。咱們先定義了列的寬度，而後把內容放到可用的網格里。

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

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

爲了將登出按鈕放到最右邊，咱們須要把它放在第 10 列：

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

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

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

結合二者
如今看下如何將二者結合起來，將咱們的 header 合併到咱們的網站佈局。咱們從構建網站佈局開始：

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;
}

如今添加 header。咱們把 header —— CSS Grid 中的一個項目轉換爲 Flexbox 容器。

header {
    display: flex;
}

如今能夠把登出按鈕設置到右邊了：

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

如今兩個容器看起來是這樣的：

如今你應該深入地理解了 Flexbox 和 Grid 的不一樣之處，而且知道如何使用它們了。

瀏覽器支持

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

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