麦子学院 2018-05-22 23:37
CSS网络系统到底有什么用处
回复:0 查看:3055
使用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
可能是更好的选择。