[[392381]]

這個(gè)話題已經(jīng)爭(zhēng)論了很多次，哪個(gè)更好?

對(duì)您的網(wǎng)站布局和內(nèi)容使用Grid(網(wǎng)格)系統(tǒng)還是Flexbox?讓我們深入了解兩者之間的主要區(qū)別以及何時(shí)使用它們。

Grid用于二維布局，F(xiàn)lexbox用于一維布局。

網(wǎng)格布局——二維

網(wǎng)格布局(即Bootstrap或CSS網(wǎng)格)用于二維布局。這意味著什么?這意味著，如果您要同時(shí)創(chuàng)建包含行和列的布局，請(qǐng)使用網(wǎng)格系統(tǒng)。

對(duì)于布局將包含頁(yè)面內(nèi)容的頁(yè)面容器來(lái)說(shuō)，這是一個(gè)完美的解決方案。

Flexbox ——一維

將Flexbox用于一維布局，這意味著內(nèi)容會(huì)沿一個(gè)方向(水平或垂直)移動(dòng)。

以Navbar為例——您可能具有Logo和頁(yè)面鏈接，這些Logo和頁(yè)面鏈接水平排列成一行(單向)。使用Flexbox將以更少的代碼行為您提供更大的靈活性和對(duì)內(nèi)容的控制。

使用網(wǎng)格系統(tǒng)進(jìn)行頁(yè)面布局，將Flexbox用于頁(yè)面內(nèi)容。

這里的一般規(guī)則是Flexbox會(huì)基于內(nèi)容，而網(wǎng)格基于布局。

Flexbox —內(nèi)容之王

讓我們看一個(gè)簡(jiǎn)單的示例，以幫助我們了解如何將這兩個(gè)概念一起使用。

讓我們從上方使用導(dǎo)航欄，從頭開始。這是原始的HTML：

<nav> 
  <div>Home</div> 
  <div>About</div> 
  <div>Contact</div> 
  <div>Search</div> 
</nav> 

現(xiàn)在，在使用Flexbox之前，這些元素將像這樣簡(jiǎn)單地相互堆疊。

讓我們貼上一個(gè) display: flex 看看會(huì)發(fā)生什么。

nav { 
  display: flex; 
} 

驚人的!現(xiàn)在，我們將元素很好地排成一行。

讓我們把“SIGN IN”(登錄)扔到最右邊。

nav > div:nth-child(4) { 
  margin-left: auto; 
} 

真正酷的是，我們把它留給項(xiàng)目來(lái)決定它們?nèi)绾畏胖?。我們不需要做任何其他事情，只需要給它一個(gè) display: flex;

現(xiàn)在，我們可以使用網(wǎng)格系統(tǒng)實(shí)現(xiàn)同樣的結(jié)果--但讓我在這里告訴你其中的區(qū)別。在這個(gè)例子中，我將使用Bootstrap網(wǎng)格系統(tǒng)來(lái)創(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è)置許多列。

通過(guò)Bootstraps網(wǎng)格系統(tǒng)，我們需要設(shè)置相當(dāng)于12列的欄位來(lái)擴(kuò)展視口的全部寬度。

這里還有一個(gè)使用網(wǎng)格系統(tǒng)做內(nèi)容的痛苦。如果我們將來(lái)決定添加另一個(gè)鏈接，我們每次都需要改變列寬。

<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)航條鏈接放入，元素就會(huì)自行處理。

結(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——它是一個(gè)Flexbox容器，代替我們網(wǎng)格布局中的“HEADER”文本。在這個(gè)片段中，我只展示了包裝導(dǎo)航條的HTML。

<header> 
  <nav> 
    <div>Home</div> 
    <div>About</div> 
    <div>Search</div> 
    <div>Sign In</div> 
  </nav> 
</header> 

現(xiàn)在，我們有了一個(gè)可以同時(shí)利用Grid布局和Flexbox優(yōu)勢(shì)的布局。

我希望你現(xiàn)在對(duì)Flexbox和Grid的一般和具體區(qū)別有了深刻的了解，知道如何和何時(shí)使用它們。

本文轉(zhuǎn)載自微信公眾號(hào)「前端全棧開發(fā)者」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端全棧開發(fā)者公眾號(hào)。