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 {
display: flex;
}
結果如下:
這裡我希望你們注意一下:我們讓這些元素自己決定它們該如何放置。除了最初的 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 那樣。
原始碼連結:https://scrimba.com/c/c2gd3T2
英文原文:The ultimate CSS battle: Grid vs Flexbox
舊文推薦: 如何用 CSS 網格快速做出網站原型
▼點選閱讀原文獲取文中連結