垂直居中：grid 和 flex 方法有什么区别？

Question

随着 flex box 的引入，有两种垂直居中内容的方法。

第一个是：

.is-vertical-center {
  display: flex;
  align-items: center;
}

另一个是：

.is-vertical-center {
  display: grid;
  place-items: center center;
}

从视觉上看，两者看起来一样。两者之间的实际区别是什么？

Answer 1

正如 SLaks 之前提到的：

'Flexbox is a one-dimensional layout method for laying out items in rows or columns.'

因此您可以使用它来管理产品布局等列表。您正在为每个产品的行为编写代码。

'CSS Grid Layout is a two-dimensional layout system for the web.'

当您想定义固定元素在网页上的位置时非常有用，如页眉、正文、页脚。每个 child 都有一个定义的位置。

Answer 2

当然，你是对的。在这个有限的测试用例中，结果在视觉上是相同的。两者都允许易于实现（同样重要的是，可预测和可预测-间隔）布局。但是，一种方法与另一种方法的适用性之间存在显着差异。也许比您想要的更多，但是...

一维与二维

cssflexbox（或灵活的盒子布局模块）规范和cssgrid规范的主要区别在于前者（flexbox) 是一维的，而后者 (grid) 是二维的。

换句话说，flexbox 旨在使项目能够在一个方向上轻松布局：水平（一行）或垂直（一列）。

另一方面，

grid 允许需要（或可以受益于）水平和垂直规范的布局：行和列。

内容优先与布局优先

Per Harald Borgen suggests 两者之间的另一个主要区别是 flexbox 是内容优先规范，而网格是布局优先规范。换句话说，flexbox 不需要太多的前期布局定义来完成它的工作。将 dispay: flex 规则应用到你的 flex parent 上，然后 flexbox 决定如何布局（当然是以一种可预测的、理智的方式）。是的，可以通过添加不同的属性来调整结果，但是 flexbox 为您做了很多繁重的工作。内容的位置 流动性 。

grid在这方面有点不同。当您第一次实现您的布局时，您通常需要定义您的网格。您需要多少列？你需要让 grid 知道。什么内容需要放在什么布局中 "cell?" grid 关心。 flexbox 另一方面，因为它只关心一个维度，所以可以更自由地调整内容的间距和位置。使用grid，内容的位置是固定的。

Rachel Andrew 是一位网格专家，如果有的话，他做了类似的区分，但将其标记为：

Working from the content out [flexbox] vs. working from the Grid definition in [grid]

浏览器支持

另一个显着差异（至少在 2019 年初编写时如此）是浏览器对 flexbox 的支持（尤其是在前端构建过程中添加了 autoprefixer）是优秀（支持回到 IE11 [甚至 IE10] 是一项相当微不足道的任务，即使这些浏览器实现了更旧的 "tweener" 现在已经过时的语法）。

另一方面，虽然浏览器对 grid 的支持不亚于 pretty darn good, supporting a grid layout back to IE11 (if that's important to you) can be a bit hairy for anything other than simple scenarios (see Rachel Andrew's excellent article)。至于IE10，不用管了。出于这个原因，一些开发人员将 "hack" flexbox 来完成可能通过使用 grid 规范更好地服务的布局。这里没有判断力。

一条切线

(例如，Bootstrap 4 是当前跨浏览器兼容 IE10 的晴雨表：值得注意的是，它确实实现了 flex 驱动的布局系统（同时引用需要特定于供应商的前缀）但没有实现 grid。这并不意味着 grid 缺乏广泛的支持——如上所述，支持是 good——这一事实也不应阻止人们实施 grid 驱动的布局；这只是一个有趣的数据点。）

因此，回到您的问题：有什么区别？从视觉上看，什么都没有（在这种特殊情况下）。从战略上讲，相当多。

Rachel Andrew 的一篇区分用例的实用文章：https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/

垂直居中：grid 和 flex 方法有什么区别？

Vertical centering: what's the difference between grid and flex method?

css

vertical-alignment

centering

flexbox

css-grid