Grid vs Flexbox：哪個更好？(粉絲福利更新)
2021年清明節(jié)作者拍攝于青島
原文：https://jason-brewer.medium.com/grid-vs-flexbox-which-one-is-better-8ee83f920f94
作者：Jason Brewer
這個話題已經(jīng)爭論了很多次，哪個更好？
對您的網(wǎng)站布局和內(nèi)容使用Grid(網(wǎng)格)系統(tǒng)還是Flexbox？讓我們深入了解兩者之間的主要區(qū)別以及何時使用它們。
Grid用于二維布局，F(xiàn)lexbox用于一維布局。
網(wǎng)格布局——二維
網(wǎng)格布局（即Bootstrap或CSS網(wǎng)格）用于二維布局。這意味著什么？這意味著，如果您要同時創(chuàng)建包含行和列的布局，請使用網(wǎng)格系統(tǒng)。
對于布局將包含頁面內(nèi)容的頁面容器來說，這是一個完美的解決方案。
Flexbox ——一維
將Flexbox用于一維布局，這意味著內(nèi)容會沿一個方向（水平或垂直）移動。
以Navbar為例——您可能具有Logo和頁面鏈接，這些Logo和頁面鏈接水平排列成一行（單向）。使用Flexbox將以更少的代碼行為您提供更大的靈活性和對內(nèi)容的控制。
使用網(wǎng)格系統(tǒng)進(jìn)行頁面布局，將Flexbox用于頁面內(nèi)容。
這里的一般規(guī)則是Flexbox會基于內(nèi)容，而網(wǎng)格基于布局。
Flexbox —內(nèi)容之王
讓我們看一個簡單的示例，以幫助我們了解如何將這兩個概念一起使用。
讓我們從上方使用導(dǎo)航欄，從頭開始。這是原始的HTML：
<nav>
<div>Home</div>
<div>About</div>
<div>Contact</div>
<div>Search</div>
</nav>
現(xiàn)在，在使用Flexbox之前，這些元素將像這樣簡單地相互堆疊。
讓我們貼上一個 display: flex 看看會發(fā)生什么。
nav {
display: flex;
}
驚人的！現(xiàn)在，我們將元素很好地排成一行。
讓我們把“SIGN IN”（登錄）扔到最右邊。
nav > div:nth-child(4) {
margin-left: auto;
}
真正酷的是，我們把它留給項目來決定它們?nèi)绾畏胖?。我們不需要做任何其他事情，只需要給它一個 display: flex;
現(xiàn)在，我們可以使用網(wǎng)格系統(tǒng)實現(xiàn)同樣的結(jié)果--但讓我在這里告訴你其中的區(qū)別。在這個例子中，我將使用Bootstrap網(wǎng)格系統(tǒng)來創(chuàng)建我們的行和列。
這是我們的HTML
<div class="row">
<div class="col-2">Home</div>
<div class="col-2">About</div>
<div class="col-2">Contact</div>
<div class="col-6">Sign In</div>
</div>
此處的區(qū)別是我們被迫設(shè)置許多列。
通過Bootstraps網(wǎng)格系統(tǒng)，我們需要設(shè)置相當(dāng)于12列的欄位來擴(kuò)展視口的全部寬度。
這里還有一個使用網(wǎng)格系統(tǒng)做內(nèi)容的痛苦。如果我們將來決定添加另一個鏈接，我們每次都需要改變列寬。
<div class="row">
<div class="col-2">Home</div>
<div class="col-2">About</div>
<div class="col-2">Contact</div>
<div class="col-2">Rad Stuff</div>
<div class="col-4">Sign In</div>
</div>
有了Flexbox，我們只需將新的導(dǎo)航條鏈接放入，元素就會自行處理。
結(jié)合兩者
讓我們看看如何將兩者結(jié)合使用，這是網(wǎng)站布局。
這是HTML（再次使用Bootstraps網(wǎng)格系統(tǒng)類）。
<div class="container">
<div class="row">
<div class="col-12">
Header
</div>
</div>
<div class="row">
<div class="col-3">
Menu
</div>
<div class="col-9">
<div class="row">
<div class="col-12">
Content
</div>
</div>
<div class="row">
<div class="col-12">
Content
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
Footer
</div>
</div>
</div>
現(xiàn)在，我們將添加Navbar——它是一個Flexbox容器，代替我們網(wǎng)格布局中的“HEADER”文本。在這個片段中，我只展示了包裝導(dǎo)航條的HTML。
<header>
<nav>
<div>Home</div>
<div>About</div>
<div>Search</div>
<div>Sign In</div>
</nav>
</header>
現(xiàn)在，我們有了一個可以同時利用Grid布局和Flexbox優(yōu)勢的布局。
我希望你現(xiàn)在對Flexbox和Grid的一般和具體區(qū)別有了深刻的了解，知道如何和何時使用它們。
謝謝閱讀！
粉絲福利
改善程序性能和代碼質(zhì)量：通過代理模式組合HTTP請求
新老手必備的34種JavaScript簡寫優(yōu)化技術(shù)
如何在JavaScript中實現(xiàn)隊列數(shù)據(jù)結(jié)構(gòu)
最近文章
WebStorm訪談：我們是如何構(gòu)建 JavaScript IDE 的？ 面向?qū)ο缶幊淌怯嬎銠C(jī)科學(xué)的最大錯誤 13個頂級免費(fèi)所見即所得文本編輯器工具Python和JavaScript——這兩種流行的編程語言之間的主要區(qū)別是什么? 編程日歷小程序，對小程序云開發(fā)和生成海報的實踐 一個付費(fèi) chrome 插件的一生