【译】Css Grid VS Flexbox: 实践比较

原文：CSS Grid VS Flexbox: A Practical Comparison
作者：Danny Markov

在不久前，所有 HTML 页面的布局都是通过table、float和其他 CSS 属性来完成的，但其实这些属性并不适合设计复杂的网页。

紧接着，出现了flexbox ——一种专门为创建强大的响应式页面而设计的布局模式。 使得元素和内容的正确对齐变得很容易，现在是大多数网页开发者首选的 CSS 系统。

现在我们有了一个“构建 html 布局最佳系统奖杯”的新竞争者——这就是强大的CSS Grid，到本月底，它将在 Firefox 52和 Chrome 57中发布，其他浏览器（希望如此）也会很快跟进。

基本布局测试

为了了解使用每个系统构建布局是什么感觉，我们对同一个 HTML 页面构建了两次 -- 一次是使用 flexbox，另一次是使用CSS Grid。 您可以从原文文章顶部附近的下载按钮下载这两个项目，或者在这个在线演示中查看它们：

剥离式静态页面布局

这个设计非常简单——它由一个居中的容器组成，其中包含一个头部、主要部分、侧边栏和一个页脚。 下面是我们必须解决的主要"挑战"，同时尽可能保持 CSS 和 HTML 的干净:

1. 布局四个主要部分
2. 响应式布局（在屏幕较小的情况下侧边栏位于主要内容的下方）
3. 将标题导航的内容对齐到左侧，按钮对齐到右侧

正如你所看到的，为了便于比较，我们把一切都写的尽可能简单。 让我们从第一个问题开始。

挑战1: 定位页面部分

Flexbox 方案

我们从 flexbox 方案开始。 我们将 display: flex添加到容器并将其子容器垂直定向。 这会让所有模块一个接一个地往下放。

.container {
    display: flex;
    flex-direction: column;
}

现在我们需要让主要部分和侧边栏挨着放。 由于 flex 容器通常是单向的，因此我们需要添加一个wrapper元素。

<div class="main-and-sidebar-wrapper">
    <section class="main"></section>
    <aside class="sidebar"></aside>
</div>
<footer></footer>

然后我们设置包裹层（wrapper）的display为:flex 并且flex-direction设置为相反的方向。

.main-and-sidebar-wrapper {
    display: flex;
    flex-direction: row;
}

最后一步是设置主要部分和边栏的大小。 我们希望主要内容是侧边栏大小的三倍，这对 flex 或百分比来说并不困难。

.main {
    flex: 3;
    margin-right: 60px;
}
.sidebar {
   flex: 1;
}

你可以看到 flexbox 已经做得很好了，但我们仍然需要相当多的 CSS 属性 + 一个额外的 HTML 元素。 让我们看看 CSS 网格是如何工作的。

CSS Grid 方案

使用 CSS Grid有几种不同的方法，我们将使用grid-template-areas，对于当下我们要完成的工作来说，它似乎是最适合的。

首先，我们将定义四个grid-area，每个网格区域一个:

<!-- Notice there isn't a wrapper this time -->
<section class="main"></section>
<aside class="sidebar"></aside>
<footer></footer>

header {
    grid-area: header;
}
.main {
    grid-area: main;
}
.sidebar {
    grid-area: sidebar;
}
footer {
    grid-area: footer;
}

然后我们可以建立我们的grid，并分配每个区域的位置。

下面的代码一开始可能看起来相当复杂，但是一旦了解了网格系统，就很容易理解了。

.container {
    display: grid;

    /*  Define the size and number of columns in our grid. 
    The fr unit works similar to flex:
    fr columns will share the free space in the row in proportion to their value.
    We will have 2 columns - the first will be 3x the size of the second.  */
    grid-template-columns: 3fr 1fr;

    /*  Assign the grid areas we did earlier to specific places on the grid. 
        First row is all header.
        Second row is shared between main and sidebar.
        Last row is all footer.  */
    grid-template-areas: 
        "header header"
        "main sidebar"
        "footer footer";

    /*  The gutters between each grid cell will be 60 pixels. */
    grid-gap: 60px;
}

就是这样！ 布局现在遵循开头所说的结构，现在甚至不需要处理任何边缘或填充。

挑战2: 让页面响应迅速

Flexbox 方案

此步骤的执行与前一个步骤紧密相连。 对于 flexbox 解决方案，我们将不得不改变wrapper的flex-direction ，并调整一些边距。

@media (max-width: 600px) {
    .main-and-sidebar-wrapper {
        flex-direction: column;
    }

    .main {
        margin-right: 0;
        margin-bottom: 60px;
    }
}

页面真的很简单，所以在媒体查询中没有太多需要修改的地方，但是在一个更复杂的布局中，将会有很多很多的东西需要重新定义。

CSS Grid 方案

因为我们已经定义了grid-areas ，现在只需要在媒体查询中对它们进行重新排序。我们可以使用相同的列设置。

@media (max-width: 600px) {
    .container {
    /*  Realign the grid areas for a mobile layout. */
        grid-template-areas: 
            "header header"
            "main main"
            "sidebar sidebar"
            "footer footer";
    }
}

或者，如果觉得有必要的话，我们可以从头开始重新定义整个布局

@media (max-width: 600px) {
    .container {
        /*  Redefine the grid into a single column layout. */
        grid-template-columns: 1fr;
        grid-template-areas: 
            "header"
            "main"
            "sidebar"
            "footer";
    }
}

挑战3: 对齐组件头部

Flexbox 方案

页眉包括一些导航链接和一个按钮。 我们希望导航在左边，按钮在右边。 导航中的链接必须彼此适当对齐。

<header>
    <nav>
        <li><a href="#"><h1>Logo</h1></a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </nav>
    <button>Button</button>
</header>

在一篇旧文章The Easiest Way To Make Responsive Headers中，我们已经使用flexbox做了一个类似的布局，这个技巧非常简单:

header {
    display: flex;
    justify-content: space-between;
}

现在导航列表和按钮正确对齐。 剩下的就是让<nav> 中的项水平居中。 在这里使用 display: inline-block 是最简单的，但是既然我们要使用完全 flexbox，那么让我们应用一个flexbox-only解决方案:

header nav {
    display: flex;
    align-items: baseline;
}

只有两行！ 一点也不差。 接下来让我们看看 CSS Grid是如何处理它的。

CSS Grid 方案

为了分割导航和按钮，我们必须设置header为display: grid ，并设置一个2列的网格。 另外还需要两行额外的 CSS 来定位它们在各自的边界上。

header{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
header nav {
    justify-self: start;
}
header button {
    justify-self: end;
}

至于导航中的内联链接--其实我们使用css grid是无法非常精准实现的。 以下是我们的最佳尝试:

css-grid-header.png

这些链接是内联的，但是它们不能正确对齐，因为没有像 flexbox 的 align-items 那样的baseline选项。 我们还必须定义另一个子网格。

header nav {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    align-items: end; 
}

很明显，CSS grid在布局的这一部分遇到了困难，但这并不奇怪——它的重点是调整容器，而不是容器内的内容。

总结

如果你已经读完了整篇文章，这个结论对你来说并不意外。 事实上是，没有一个最优的解决方案--flexbox和 CSS Grid擅长的东西不同，决定了使用场景不同，它们应该一起被使用，而不是作为竞争对手。

对于那些直接跳到文章结论的人（不用担心，我也经常这样做)），这里有一个全文比较结论的摘要:

• CSS grids对于构建更大的图片非常有用。 它们使管理页面布局变得非常容易，甚至可以处理更多非传统和不对称的设计
• Flexbox 非常擅长对齐元素内容，它可以用来定位设计中较小的细节
• 使用 CSS grids进行2D 布局（行和列）
• Flexbox只在一个维度时（行或列）工作得更好
• 没有理由只使用CSS grids或只使用 flexbox。 我们应该同时学习它们，并使用它们