CSS 终极之战：Grid VS Flexbox

简评：近些年 CSS Flexbox
在前端开发者中变得很是流行。其实并不奇怪，它能让咱们更容易建立出动态布局，以及在容器中对其内容。然而城里新来了个小伙叫 CSS
Grid，它有许多弹性盒的能力，有时候比弹性盒好用，有时候却很差用。做者点评了弹性盒、网格二者之间的差别，以及何时用哪一种比较好。

先来看下这节课的截屏预告：

一维 VS 二维

若是你想从这篇文章中学到精髓，下面的就是：

Flexbox 是为一维布局设计的，而 Grid 是为二维布局设计。

这意味着若是你想要在一个方向上放置项目（好比在标题栏中有三个按钮），那么你应该用Flexbox：

它会比 CSS Grid 更加灵活，同时只须要更少的代码，更容易维护。

然而，当你须要在两个维度 —— 行和列上建立整个布局时，那么你应该使用 CSS Grid：

这种状况下， CSS Grid 会更加灵活，让你的标记更加简单。代码也更容易维护。

固然你能够结合二者使用。上面的例子中将会完美地使用 Grid 作页面布局，用 Flexbox 来对齐标题栏中的内容。在文末，我会确切地展现如何作到这点。

内容优先 VS 布局优先
另外一个核心区别在于：Flexbox 之内容为基础，而 Grid 以布局为基础。这看起来有点抽象，因此让咱们来看看确切地例子，这会更容易理解。

咱们会使用以前的 header， HTML 代码以下：

<header>
    <div>Home</div>
    <div>Search</div>
    <div>Logout</div>
</header>

在咱们进入 Flexbox 布局以前，这些 div 是相互叠在一块儿的：

Flexbox header

然而，当咱们给一个 display: flex 样式时，这些元素就会排成一行。

header {
    display: flex;
}

为了将登出按钮移动到最右边，咱们只须要找到那个元素，而后给一个外边距：

header > div:nth-child(3) {
    margin-left: auto;
}

结果以下：

这里我但愿大家注意一下：咱们让这些元素本身决定它们该如何放置。除了最初的 display: flex; 咱们不须要预约义任何东西。

这是 Flexbox 和 Grid 的核心差别，当咱们用 Grid 从新建立 header 时，这点会更明显。

即使 CSS Grid 不是用来建立一维的 header，它在这篇文章中仍然是一个很好的练习，让咱们明白 Flexbox 和 Grid的核心差别。

Grid header

使用 CSS Grid，咱们能够有好几种方式来建立 header。我将使用至关直接的一种，咱们的网格有 10 列，每列宽度为 1 个单元：

header {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
}

和 Flexbox 的方案看起来彻底同样。

可是，咱们能够看看底下有哪些不一样。咱们将使用 Chrome 检查器来检查列：

关键不一样在于这种方式先定义了列 —— 即布局。咱们先定义了列的宽度，而后把内容放到可用的网格里。

这种方式迫使咱们将 header 分割成多少列。

除非咱们改变网格，咱们被 10 列网格限制了。而使用 Flexbox 则不会面临这种限制。

为了将登出按钮放到最右边，咱们须要把它放在第 10 列：

header > div:nth-child(3) {
    grid-column: 10;
}

检查网格时看起来是这样：

咱们不能简单地给一个 margin-left: auto; 由于登出按钮已经被放在布局中的确切的格子中，在第三列。为了移动它，咱们要找到另外一个格子。

结合二者
如今看下如何将二者结合起来，将咱们的 header 合并到咱们的网站布局。咱们从构建网站布局开始：

HTML 标记：

<div class="container">
  <header>HEADER</header>
  <aside>MENU</aside>
  <main>CONTENT</main>
  <footer>FOOTER</footer>
</div>

CSS ：

.container {
    display: grid;    
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 50px 350px 50px;
}

项目样式：

header {
    grid-column: span 12;
}
aside {
    grid-column: span 2;
}
main {
    grid-column: span 10;
}
footer {
    grid-column: span 12;
}

如今添加 header。咱们把 header —— CSS Grid 中的一个项目转换为 Flexbox 容器。

header {
    display: flex;
}

如今能够把登出按钮设置到右边了：

header > div:nth-child(3) {
    margin-left: auto;
}

如今两个容器看起来是这样的：

如今你应该深入地理解了 Flexbox 和 Grid 的不一样之处，而且知道如何使用它们了。

浏览器支持

最后，我想提一下浏览器支持。在写这篇文章时，全球网站流量的 77% 支持 CSS Grid，而且还在增长。我相信 2018 将会是 CSS Grid 时代，它会有一个突破，并成为前端开发者的必备技能。就像前几年的 CSS Flexbox 那样。源代码连接

原文连接： The ultimate CSS battle: Grid vs Flexbox