Question

通过引入弹性框，有两种方法可以使内容垂直居中。

第一个是：

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

另一个是：

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

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

Answer 1

就像SLaks之前提到的那样：

“ Flexbox是一种用于在行或列中布局项目的一维布局方法。”

因此您可以使用它来管理诸如产品布局之类的清单。您正在为每种产品的行为进行编码。

“ CSS网格布局是用于Web的二维布局系统。”

在您想要将固定元素的位置定义为页眉，正文和页脚时很有用。每个孩子都有明确的位置。

Answer 2

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

一维与二维

css flexbox规范（或“柔性盒布局模块”）与css grid规范之间的主要区别在于，前者（flexbox）是一维的，而后者是一维的（grid）是二维的。

换句话说，flexbox旨在使项目在水平（连续）或垂直（垂直）的单个方向上易于布局。

另一方面，

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

内容优先与布局优先

Per Harald Borgen suggests认为，两者之间的另一个主要区别是flexbox是内容优先规范，而grid是布局优先规范。换句话说，flexbox不需要太多的前期布局定义即可完成工作。将dispay: flex规则贴到弹性父级上，然后flexbox决定如何安排内容（当然，这是可预测的，理智的方式）。是的，可以通过添加不同的属性来调整结果，但是flexbox为您带来了很多繁重的工作。内容的放置是流体。

grid在这方面有点不同。首次实现布局时，通常需要定义网格。您需要多少列？您需要让grid知道。在哪个布局“单元”中需要包含哪些内容？ grid在乎。另一方面，flexbox由于只关心一个维度，因此可以在内容的间距和位置上享有更多的自由。使用grid，内容的位置是固定的。

网格专家雷切尔·安德鲁（Rachel Andrew）（如果有的话）也做了类似的区分，但将其标记为：

从[flexbox的内容开始，到[[grid]的Grid定义开始，

浏览器支持

另一个显着差异（至少是在2019年初编写）是浏览器对flexbox的支持（尤其是在前端构建过程中添加了autoprefixer）非常出色（支持IE11 [甚至IE10]是一项相当琐碎的任务，即使那些浏览器实现的是较旧的“补间”语法（现在已经过时）。

另一方面，虽然浏览器对grid的支持不亚于pretty darn good，但支持回溯到IE11的网格布局（如果这对您很重要）可能会给您带来很多麻烦简单场景（请参阅Rachel Andrew的excellent article）。至于IE10，请不要打扰。因此，某些开发人员会“入侵” flexbox以完成使用grid规范可能会更好地提供服务的布局。这里没有判断力。

切线

例如，

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

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

雷切尔·安德鲁（Rachel Andrew）撰写的有关区分用例的便捷文章：https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/

垂直居中：网格法和弹性法有什么区别？

2 个答案: