css flexbox模型_Flexbox vs. CSS Grid：应该使用什么以及何时使用？

css flexbox模型

Flexbox和CSS Grid是最近已成为主流的两个CSS布局模块。 两者都允许我们创建复杂的布局，而以前只能通过应用CSS hack和/或JavaScript来实现。 Flexbox和CSS Grid具有许多相似之处，并且两者都可以解决许多布局问题。 然而，何时使用这是另一个问题。

行业回顾

CSS Grid与Flexbox的争论目前是CSS社区中最热门的话题。 如果您关注行业新闻，那么最近您会看到许多精彩的文章出现，例如：

• 雷切尔·安德鲁（Rachel Andrew）早在2016年就在该问题上发表了博客 ，后来继续进行更详细的讨论。
• 上个月，克里斯·科耶尔（Chris Coyier）启动了一个病毒式Twitter话题，该话题最后以一篇较长的文章结尾，并在CSS-Tricks上提供了一些很棒的代码示例。
• Michelle Barker还通过在她CSS {In Real Life}博客中撰写了另一篇关于Grid vs flexbox的出色文章来回应Chris的Twitter 话题 。
• MDN社区已经针对Grid和flexbox之间的基本区别创建了一些详尽的文档，这是当前有关该主题的最佳可用文档。

您还可以在网络上找到许多其他相关的博客文章，文章，视频和讨论。 由于该主题将来可能会保持相关性，因此我建议您阅读上面的一些文章，并对这个问题形成自己的立场，因为目前尚无定论。

这是另一种选择。

一维与二维

要知道的最重要的事情是flexbox是一维的，而CSS Grid是二维的。 Flexbox，就勾画出项目沿水平或垂直轴，所以你必须决定是否要基于行或基于列的布局。

Flex布局还可以包装在多行或多列中，并且flexbox会根据其内容和可用空间将每行或每列视为一个单独的实体。

另一方面，CSS Grid允许您沿两个轴工作：水平和垂直。 网格允许您创建二维布局，您可以在其中将网格项精确地放置到由行和列定义的单元格中。

这就是W3C希望我们使用flexbox和Grid的方式，但是实践经常凌驾于理论之上，并不是每个人都喜欢一维和二维叙述。 例如，克里斯·科耶尔（Chris Coyier）在上述文章中作了以下陈述：

“我不是网格与flexbox的“ 1D”与“ 2D”区别的世界上最大的拥护者，只是因为我发现网格的日常使用大部分是“ 1D”，因此非常有用。 我不希望有人认为他们必须使用flexbox而不是网格，因为只有在需要2D时才需要网格。 尽管可以通过网格实现2D布局，但在Flexbox中却无法实现，这是一个很大的区别。”

而且，这就是CSS在现实生活中的工作方式。 实际上，我们也可以使用flexbox创建二维布局（由于其具有包装功能），并且还可以使用CSS Grid创建一维布局（由于其具有自动放置功能）。

尽管flexbox最初不是用于构建网格的，但通常以这种方式使用。 最好的例子是Bootstrap 4的网格系统，该系统基于flexbox。 那里的所有Bootstrap 4站点都使用flexbox完成二维布局 ，包括行和列。 并且，还有其他流行的工具（例如Flexbox Grid）也可以做到这一点。

用例

关于这两个布局模块的最常见误解是，Grid用于全页面布局，而flexbox用于较小的组件。 根本不是这种情况。 上面提到的所有作者都警告不要使用这种方法，因为它会严重限制可能性。 您需要根据具体情况分别评估每个布局，以选择更好的选项。

专注于内容放置：CSS网格

CSS Grid专注于精确的内容放置。 每个项目都是一个网格单元，沿水平轴和垂直轴排列。 如果要精确控制布局中项目的位置，则可以使用CSS Grid。 Grid模块的W3文档断言：

“它提供了一种机制，使作者可以使用一组可预测的大小调整行为将布局的可用空间划分为列和行。 然后，作者可以将其应用程序的构建基元元素精确定位和调整大小，使其位于这些列和行的交点所定义的网格区域中。”

使用flexbox，很难预测某些视口的行为，并且可以获得令人惊讶的结果。 当然，您可以设置弹性项目的宽度和高度，或者使用calc()函数，但是却失去了弹性箱的主要吸引力：灵活性。

CSS Grid并非如此。 它具有诸如grid-template-rows和grid-template-columns类的属性，以及诸如分数单位之类的实用程序，可让您精确地计算所有内容。 因此，Grid特别适合于创建不寻常的布局，例如破碎的 ，不对称的和重叠的布局。

CSS Grid也使创建响应式布局成为可能，而无需使用媒体查询。 这个想法来自Heydon Pickering，他最近发布了有关算法布局的YouTube视频 。 他介绍了一种简单的Grid技术，该技术使网格单元可以包装并适应任何视口尺寸：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  grid-gap: 1rem;
}

尽管布局是根据可用空间来包装的，但是它仍然不像flexbox那样具有内容感知能力，因为项目内部的内容无法灵活扩展：

专注于内容流：Flexbox

Flexbox专注于内容流，而不是内容放置。 弹性项目的宽度（或高度）由项目的内容确定。 弹性项目根据其内部内容和可用空间而增长和收缩。 这是W3C的flexbox文档如何解释布局模块的目标的方法：

“ ...（flexbox）获得了简单而强大的工具，可以按照Web应用程序和复杂网页经常需要的方式来分配空间和对齐内容。”

简而言之，flexbox使您可以灵活地分配空间和对齐项目。 让我们看一下Heydon的网格在flexbox中的样子。 以下代码为每个flex项目添加了0.5rem的边距（由于flexbox没有gap属性，我们需要使用负边距hack）。

.container {
  display: flex;
  flex-wrap: wrap;
  margin: -0.5rem;
}
.item {
  margin: 0.5rem;
}

如下所示，内容长的第一个弹性项目会根据需要延伸：

当然，您可以使用width或flex-basis属性制作固定宽度的flex项目。 但是，如果这样做，则会失去flexbox的内容意识，这是其存在的主要原因。 您还可以在上方看到flexbox独立对待每一行。 根据行内的文本数量，不同的行将flex项以不同的方式对齐。 这里没有列，这不是网格，而是一维布局。

Flexbox还可以让您决定在屏幕上空间过多或空间不足时应如何处理内容。 我在有关flexbox大小调整的文章中详细介绍了该主题。 使用flex-grow和flex-shrink属性，您可以获得完全流畅的布局，该布局可以优化每个视口大小的Flex项的分配。

flexbox还有其他典型的用例，例如居中项 ， 调整列表的最后一项 ， 将页脚粘贴到页面底部以及创建响应菜单 。 您可以在MDN文档中找到更多flexbox用法示例。

浏览器支持

Flexbox具有相当不错的浏览器支持 ，而IE11-和Edge 15- 不支持 CSS Grid。

文章经常建议使用flexbox作为CSS Grid的后备，但是许多开发人员认为它太麻烦了，宁愿只使用flexbox创建其布局。

但是flexbox也不是完美的。 它有一些问题正在GitHub上的Flexbugs存储库中收集（带有跨浏览器的bug解决方法）。 如果在使用flexbox时遇到问题，那么值得一看此列表，因为您可能会找到解决问题的方法。

准备战斗！

翻译自: https://webdesign.tutsplus.com/articles/flexbox-vs-css-grid-which-should-you-use--cms-30184

css flexbox模型