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

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

在不久前，所有 HTML 页面的布局都是通过表格、浮动和其他 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 容器通常是单向的，因此我们需要添加一个包装器元素。

<div class="main-and-sidebar-wrapper">
    <section class="main"></section>
    <aside class="sidebar"></aside>
</div>
<footer></footer>
复制代码

We then make the wrapper display:flex and  flex-direction it in the opposite direction.

然后我们设置包裹层（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，它似乎最适合当下我们要完成的工作。

First we will define four grid-area -s, one for each page section:

首先，我们将定义四个 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;
}
复制代码

Then we can set up our grid and assign the placement of each area. The code below may seem quite complicated at first, but once you get to know the grid system it becomes really easy to grasp.

然后我们可以建立我们的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>
复制代码

We've already done a similar layout with flexbox in one of our older articles - The Easiest Way To Make Responsive Headers . The technique is really simple:

在一篇旧文章 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 方案

To split the nav and the button we will have to make the header display: grid and set up a 2-column grid. We will also need two extra lines of CSS to position them at the respective borders.

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

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

As for the inline links inside the navigation - we couldn't get it quite right with CSS grid. Here is how our best try looks:

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

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

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

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

总结

如果你已经读完了整篇文章，这个结论对你来说并不意外。 事实是，没有一个最好的系统- flexbox 和 CSS Grid 擅长不同的东西，应该一起使用，而不是作为替代彼此。

For those of you who skip directly to the conclusion of articles (no worries, we do it too), here is a summary of the comparison:

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

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