CSS 網(wǎng)絡系統(tǒng)到底有什么用處呢，我們創(chuàng)建兩個基本設計——一個使用 Flexbox ，另一個使用網(wǎng)格系統(tǒng)，嘗試一下。 Web前端學

使用Flexbox構建布局實際上只是幫助你將兩個項目放在一起，這意味著它將所有子元素都變成了“偽內聯(lián)元素”（剛剛提出）。這也意味著你必須考慮如何放置HTML元素。每個div-Element ，即將成為一排的使用Flexbox 將變成一個容器。我最終得到了我的基本布局和代碼：

// HTML Structure      Header  Content                                       

Main  Content               

Main  Content                         Footer  Content               

Sidebar  Content    //

// CSS

html {     background: darkred; font-family: 'Avenir'}

footer,  header {     height: 26vh;}

.box {     color: darkred; background: rgb(233, 233, 233); text-align: center; padding: 2em 1em; margin: 5px;}

.mainContainer {     height: 26vh;}

.flex {     display: flex;}

.contentContainer {     flex: 2;}

sidebar {     flex: 1; height: 52vh;}

.flex >  main,  section {     flex: 1;}

現(xiàn)在讓我們看看網(wǎng)格方法。

CSS網(wǎng)格布局是CSS中最強大的布局系統(tǒng)。這是一個二維系統(tǒng)，這意味著它可以同時處理列和行，不像flexbox，它主要是一維系統(tǒng)。 --Chris House

Chris House指出最重要的區(qū)別. （全文：  https://css-tricks.com/snippets/css/complete-guide-grid/_)_ 我們可以使用Grid創(chuàng)建二維布局！我可以直接進入CSS并決定它應該是什么樣子，放置HTML時可以少關注結構。一般來說，你可以設置模板行和模板列，并給它們一個寬度和高度。此外，您可以決定行元素中的哪一列應該開始和結束。但是我經(jīng)歷過在CSS-Grid 中有一個超級強大的方法。它使用 Grid-Areas 。命名每個CSS類，并直接與這些名稱建立一個模板。看一下這個：

// HTML Structure              Header  Content        

Main  Content        

Main  Content        

Sidebar  Content        Footer  Content   

// CSS

html {     background: darkred; font-family: 'Avenir'}

.gridContainer {     display: grid; grid-gap: 5px;

/* we  set up a string  for  each row  in the Layout. Every row has  to have  as many values  as the row  with the most elements has -  in this  case row 2 */

    grid-template-areas:         'header header header'         'main section sidebar'         'footer footer sidebar';

grid-template-rows: 32vh 32vh 32vh;}

header {  grid-area: header;

} main {  grid-area: main; color: white;} footer {  grid-area: footer; color: white;} sidebar {  grid-area: sidebar; color: white} section {  grid-area: section; color: white}

.box {     color: darkred; background: rgb(233, 233, 233); text-align: center; padding: 2em 1em;}

我們必須為每一行聲明占位符，并設置這些元素在這一行中相對于其他元素占用的空間大小。

你應該使用什么？

這完全取決于你想要建立什么。我不會說網(wǎng)格系統(tǒng)正在代替Flexbox布局，但它們（如果您熟悉這個想法）可能會更快地使用并幫助您使用父元素強制布局，并且不依賴于HTML結構。當您使用動態(tài)數(shù)據(jù)時，這正在發(fā)揮作用。不過，兩者都允許使用像align-items 或justify-content 這樣的CSS屬性，這些屬性對于單個元素來說非常方便，對于這些想法來說，F(xiàn)lexbox 可能是更好的選擇。