CSS网络系统到底有什么用处

CSS 网络系统到底有什么用处呢，我们创建两个基本设计——一个使用 Flexbox ，另一个使用网格系统，尝试一下。 Web前端学

使用Flexbox构建布局实际上只是帮助你将两个项目放在一起，这意味着它将所有子元素都变成了“伪内联元素”（刚刚提出）。这也意味着你必须考虑如何放置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;}

现在让我们看看网格方法。

CSS网格布局是CSS中最强大的布局系统。这是一个二维系统，这意味着它可以同时处理列和行，不像flexbox，它主要是一维系统。 --Chris House

Chris House指出最重要的区别. （全文：  https://css-tricks.com/snippets/css/complete-guide-grid/_)_ 我们可以使用Grid创建二维布局！我可以直接进入CSS并决定它应该是什么样子，放置HTML时可以少关注结构。一般来说，你可以设置模板行和模板列，并给它们一个宽度和高度。此外，您可以决定行元素中的哪一列应该开始和结束。但是我经历过在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;}

我们必须为每一行声明占位符，并设置这些元素在这一行中相对于其他元素占用的空间大小。

你应该使用什么？

这完全取决于你想要建立什么。我不会说网格系统正在代替Flexbox布局，但它们（如果您熟悉这个想法）可能会更快地使用并帮助您使用父元素强制布局，并且不依赖于HTML结构。当您使用动态数据时，这正在发挥作用。不过，两者都允许使用像align-items 或justify-content 这样的CSS属性，这些属性对于单个元素来说非常方便，对于这些想法来说，Flexbox 可能是更好的选择。