深入理解 Flexbox 和 Grids 布局

F2EX 玩儿 2018-01-17

layout 玩儿

这篇文章将揭开围绕 Flexbox 布局和 Grids 布局的神话，同时向你展示这两项技术共同运作的力量。

让所有的浏览器支持 CSS Grids 布局已经花费了六年多的时间。在这期间，规范一直备受争议。2011年，微软开发团队宣布 IE10 将支持 Grids ，但由于缺乏与 W3C 提案相关的信息，一些开发人员开始怀疑是否真的需要这个新的布局系统，因为当时我们已经有了浮动，表格和一些被浏览器支持的 Flexbox 。

不过，得益于开发人员和 CSS 工作组成员（如 Rachel Andrew 和 Jen Simmons ）的努力，Grids 开始越炒越热，随之而来有很多实现也在一夜间浮现。

截至2017年3月，Grids 已经在所有主流浏览器上实现，但是围绕该规范的神话和传言依然存在。这篇文章的目的是为了解决这些神话。

有人说：“ Grids 已经替代了 Flexbox ”。或者 “ Flexbox 已经成为 Grids 的备用布局”。这些信息对于开发人员来说是非常不利的，我希望我们能避免这种思维方式。

所以，让我们来深入了解 Flexbox 布局和 Grids 布局技术合作的真正力量，而不是互相抵触。

打破谣言

在2010年开始流传的“ Grids 与 Flexbox ”系列传闻中，我前面提到的两个是唯一值得揭穿的传言。

Grids arrived to kill Flexbox.
“不，今晚只有一个人会死，那就是你——表格布局！”
人们历来倾向于把技术（或者人…）相互对立起来，尽管对比和竞争通常来说是对产业有利的，但这并不适用于我们讨论的这个情况。

Flexbox 和 Grids 差不多是在同时间开发出来的，但有着不同的目标，我们将在本文中进一步分析。如果阅读完这篇文章，你还有疑问，请记住Grids（1）和 Flexbox（2）在 W3C 草案中是相同的编辑在起草。它们协同工作，而不是相互竞争😊。

Flexbox is Grid’s fallback.
如果你看到了飞贼，就不要去追鬼飞球了。
Flexbox 的目标与 Grid 不同。因此，我们不应该认为前者是后备，特别是因为它在 IE 浏览器中的支持和 Grids 一样糟糕。

使用 Flexbox 和 Grid 布局

我们先来看看它们不同的用例和它们相互补充的方式：

一维布局
如果你需要将内容放在一个维度中，无论是水平（ x 轴）还是垂直（ y 轴），并且你希望布局对元素的内容作出响应，那么 flexbox 就是你需要的。这对于（但不限于）组件来说是恰当的。
二维布局
如果你需要在 x 轴和 y 轴上显示你的内容，这意味着你需要 Grid ！该属性非常适合页面布局和复杂的非线性组件。

当然，每条规则都有例外，但是如果你为主要和视觉上复杂的布局预留 Grid ，为一行预留 Flexbox（当然如果需要多列的话，就用flex-wrap属性）布局，则会更加顺手。

截至 2017 年，开发人员比使用 Grids 更加熟悉 Flexbox ，所以如果你还没有看到生产环境中的 Grids，我强烈建议你看看 Full Stack Fest Barcelona 网站。他们在演讲者页面使用了 Grids ，非常棒。

即使它们的目标不同，但也有一些相同的内部属性，因为毕竟它们都是布局工具。它们的公有属性是 CSS Box Alignment Specification 的一部分，这是世界各地的开发人员已经要求了很长时间的东西。还记得垂直排列那会地狱般的考验吗？现在的开发者赶上好时代了。

盒模型对齐规范

新规范包括内容分布和自我对齐功能，可用于在 Flexbox 或 Grid 的块元素中。

在Flex容器内对齐元素

在Flex容器内排列元素

在 Grid 容器内对齐元素

这里先停下仔细看一下上面的例子。首先，我们使用 repeat() 创建了一个三列的网格，每一列是1fr宽；然后，我们使用 align-items 和 justify-items 在X轴和Y轴对齐每个单元格，然后使用 align-self 和 justify-self 使元素伸展到合适的高度。

如果你也比较熟悉 Flexbox ，你会发现这些属性都是 flexbox 布局公有的属性。主要的差别其实就是我们没有用“flex-start”或者“flex-end”，而是与之对应用了 start 和 end 。

在 Grid 容器中排列元素

Flexbox 和 Grids 在不久的将来会共享另一组属性：grid-gap 。这个功能是很多开发者一直想要的，它能帮我们轻松指定 flex 元素的间距。 grid-row-gap 和 grid-column-gap 将分别重命名成 row-gap 和 column-gap 了。不过别担心！你现在的代码还是可以正常工作 ❤️ 。

同时使用 Flexbox 和 Grids

创建 grid 之后，你就需要往每个网格单元增加内容了。无论增加图片、文字或两者都有，把它们放在合适位置的最好的办法就是使用 Flexbox 。

拥抱响应式

与浮动或其他传统布局系统不同的是，Flexbox 和 Grids 是在多设备时代出现的。因此，它们建立在这些其他方法所缺乏的流动性和自适应性上。你会发现，有很多方法可以使这两种布局方式适应用户的屏幕。

流式 Flexbox 布局

Flexbox 默认就是响应式的。一旦你对一个元素使用 display: flex ，你就已经有一个流式布局了，不过这也取决于你有多少内容，需要给元素加上一个最小宽度。如此以来，你就可以方便的利用 flex-basis 和 flex-wrap 这两个属性了。

流式 Grid 布局

要确保你的 Grid 布局总是响应式的以及它的元素都有一个最小宽度，我们可以使用 minmax 函数和新的 fr 单位。设计这个单位就是为了帮助我们方便创建灵活的网格。1fr 就等于网格系统里可用的一个单位空间。它会把单元之间的距离包含在网格内，因此它会帮我们计算出每个元素自身合理的宽度。

如果你希望在小型的设备上改变布局，你依然可以使用媒体查询。

部署

由于在所有的主流浏览器上有了很好的支持，因此 Grids 和 Flexbox 都已经适用于生产环境。微软的 Edge 15 还只支持旧语法的 Grids 布局，Edge 16已经在17年10月17号 Windows 10 秋季创意者大会更新发布的新版中解决了这个问题。

如果你希望所使用的布局被所有浏览器支持，那么强烈建议你用 css 特性查询（feature queries），在不支持 Grids 的浏览器上使用旧的布局系统。

  .grid-parent{ 
        /* 旧的布局系统 */
  } 

  @supports (display: grid) { 
    .grid-parent{ 
        /* 使用 grids 布局*/ 
    }
  }

最后提一下，记得看一下已经报出的 bug ，这里是 grids 的，这是 Flexbox 的。

使用 Grids 和 Flexbox

别让麻瓜打败你——从今天起就开始使用 CSS Grids 吧。那些关于 Flexbox vs Grids 的杞人忧天的言论，不应该成为你的绊脚石。你应该从今天就使用新的方法来建立自己的网站。便利的定制化和足够多的浏览器支持已经足以让你在每天的工作中使用它们了。

资源

刚开始学习和使用 CSS Grids 技术起初会比较枯燥。不过下面有很多资源可以帮我们渡过难关：

纸
我们忠实的老朋友。开始思考 grid 结构的最好方法就是在纸上画出来。你就能看到那些你即将开始做的列、行和间距。在纸上涂鸦并不会花你很长时间，但它能帮你更好的理解整个 grid 的布局。
开发者工具
Firefox 开发者工具有一个很好的内置 CSS Grids 调试工具，它能帮你清晰的看到行、列和网格间距。

Chrome 也发布了一个类似的工具，点这里。
阅读、学习，练习！
假如你还没有机会尝试 CSS Grids ，那么你可以看看下面这些有趣的链接：
- Grid Garden：你听说过 FlexboxFroggy 吗？嗯，Grid Garden是另一个帮你学习CSS布局的有趣的游戏网站。
- Grid 布局演示: Rachel Andrew 的一个项目，教你从头开始。这里还有很多有用的 CSS 设计模式，可能对你的日常工作有帮助。
- A Complete Guide to Grid： CSS-Trick的文章，适合马克下来。

*阅读体验上有删改。原文：https://aerolab.co/blog/flexbox-grids/

layout 玩儿

2021-05-26

深入理解 Flexbox 和 Grids 布局