为了迎接 2017 年 3 月 CSS Grid 在浏览器中的发布，我着手创建了 一系列针对 CSS Grid 规范的指南和参考材料，这些材料已在 MDN 上发布。在更新了这些材料之后，我们认为可以用类似的 Flexbox 指南来完善文档，因此我更新了现有材料，使其反映 Flexbox 的核心用例。

这非常有效。在当前规范的状态下，Flexbox 现在与 Grid 和 Box Alignment 一起，构成了 Web 布局的一种全新思维方式。在文档中反映这一点很有用。

新文档概述

我在 MDN 中添加了八个新的指南

• Flexbox 的基本概念
• Flexbox 与其他布局方法的关系
• 在 Flex 容器中对齐项目
• 对 Flex 项目进行排序
• 控制 Flex 项目沿主轴的比例
• 掌握 Flex 项目的换行
• Flexbox 的典型用例
• Flexbox 的向后兼容性

在创建这些材料时，我尝试将 Flexbox 作为整体布局系统的一部分。在 Grid 发布之前，Flexbox 被视为解决所有布局问题的规范，但使用 Flexbox 时遇到的很多困难是，我们试图用它来创建 Grid 专门用于创建的二维布局。我们再次发现自己努力说服一种布局方法去做它没有设计去做的事情。

因此，在这些指南中，我专注于 Flexbox 的实际用例，考察了 Grid 应该使用的地方，以及规范如何与书写模式、Box Alignment 和项目排序一起工作。

布局大纲

有人问我是否应该先学习 Flexbox，然后再学习 Grid 布局。我的建议是，学习每个规范的基础知识以及使用每种布局方法的原因。在生产网站中，你可能会有一些模式适合使用 Flexbox 布局，而另一些模式适合使用 Grid 布局。

在 MDN 上，你应该从 Flexbox 的基本概念 以及 Grid 的配套文章——Grid 布局的基本概念 开始。接下来，看一下这两篇文章，它们详细介绍了 Flexbox 和 Grid 如何融入整体 CSS 布局图。

• Flexbox 与其他布局方法的关系
• Grid 布局与其他布局方法的关系

浏览完这些指南后，你将对这些规范有一个合理的概述。在你开始使用这些规范创建设计模式时，你可以深入研究每个规范的更详细的指南。

Flexbox 和 Grid 之间的相似之处

在学习 Flexbox 和 Grid 的过程中，你会发现这两个规范之间有很多相似之处。这是设计使然。你将在 Grid 规范中找到这个说明

“如果你注意到这个 Grid Layout 模块和 Flexible Box Layout 模块之间存在任何不一致之处，请报告给 CSSWG，因为这很可能是一个错误。”

Flexbox 规范中的一部分 Box Alignment 属性已移至其自己的规范——Box Alignment Level 3。Grid 将该规范用作参考，而不是复制这些属性。这意味着你应该发现关于 在 Flex 容器中对齐项目 的信息与在 Grid 布局中的 Box Alignment 中找到的信息非常相似。在许多方面，在使用 Grid 布局时，对齐更容易理解，因为你始终有两个轴在起作用。

这些属性从 Flexbox 移动到 Grid 的过程在另一个方向上也起作用。在 Grid 中，我们有 grid-gap 属性，它代表了一种设置 grid-column-gap 和 grid-row-gap 的简写方式。今年内，这些属性将被移到 Box Alignment 规范，并重命名为 gap、column-gap 和 row-gap。一旦浏览器为 Flexbox 实现这些属性，我们就能在 Flexbox 中添加间距，就像在 Grid 中一样，而不必使用边距来创建项目之间的间距。

浏览器对 Flexbox 的支持

到目前为止，Flexbox 拥有出色的浏览器支持。我已经详细说明了在 Flexbox 的向后兼容性 中需要注意的事项。目前的问题主要集中在旧版本的浏览器上，这些浏览器在供应商前缀下支持规范的早期版本。这些问题已在我的 MDN 指南和 Flexbugs 网站 上有详细的记录，该网站详细介绍了互操作性问题以及相应的解决方法。

Flexbox 和 Grid 规范目前都处于候选推荐状态。预计在此阶段不会对这两个规范进行重大更改。你应该对学习和将 Flexbox 和 Grid 整合到生产网站中充满信心。

转向一种关于布局的新思维模式

有了 Flexbox 和 Grid 以及相关的 Box Alignment 和书写模式规范，我们有了 Web 的全新布局模型，这些模型旨在实现我们所需的布局类型。我们这些多年来一直在与浮动作斗争以创建布局的人必须转变我们的思维方式，才能真正利用现在所能实现的，而不是试图将其强加到我们熟悉的东西上。无论你对实现更多创意设计感兴趣，还是仅仅想简化复杂用户界面的开发，我希望我创建的材料能够帮助你彻底了解这些规范。