CSS网格与Flexbox-原创手记-慕课网

几天前，我阅读了一篇关于CSS网格系统的文章。但作为开发人员，你真的不知道在你真正尝试之前有什么用处。所以让我们来尝试一下。我将创建两个基本设计。一个使用Flexbox，另一个使用网格系统。

使用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可能是更好的选择。

两个演示：https：//github.com/mixbened/gridDemo/tree/master

原文出处