标签：
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
// 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可能是更好的选择。
CSS网络系统到底有什么用处
标签：
