网格还是Flexbox？

我们今天出版的材料的作者米歇尔·巴克（Michelle Barker）说，克里斯·科耶（Chris Koyer）最近进行的Twitter 讨论使她思考了网络开发人员在设计布局时如何在CSS Grid Layout和CSS Flexbox Layout技术之间进行选择。



克里斯·科耶（Chris Koyer）在推文中向听众提出了一个问题，即那些了解Grid和Flexbox的人更喜欢如何解释这些技术之间的区别。

在米歇尔（Michelle）认为的这个问题的答案中，人们非常期待，他可能会注意到瑞秋·安德鲁（Rachel Andrew）和詹·西蒙斯（Jen Simmons）的宝贵想法。

Rachel 说， Flexbox技术旨在开发一维布局，以描述元素如何按行或列进行排列。 网格技术旨在开发包含行和列的二维布局。

詹恩说 ，网格技术用于描述行和列的布局。 在这种情况下，内容将完全按照开发人员的需要放置在布局的单元格中。 使用Flexbox时并非如此，这不仅与将数据放置在第二维上（这已经可以理解）有关，而且还在于将数据放置在一维上。 Flexbox技术不适用于大多数使用这种技术的情况。

Michelle指出，仅阅读推文并不能揭示使用Grid和Flexbox技术的功能。 在本文中，她想讨论何时何地使用这些技术，以及为什么可能优先使用一种技术。

在读完克里斯的问题的答案后，米歇尔惊讶于许多人说他们只会将Grid用于页面级布局，而将Flexbox用于其他所有内容。 如果您还遵守这样的规则，则意味着您严重限制了自己在各种情况下使用Grid的强大功能的能力。 该材料的作者希望向Web开发人员推荐的主要内容是，应将每种布局视为一种特殊的东西，分析可用的功能，而不是对创建它所需的技术做任何假设。 在选择适合布局开发的技术时，您可能会问自己一些问题。

您必须进行多少次计算？

这是我对克里斯的问题的回答。 然后我说 ，如果在我看来，创建布局时您不得不过于频繁地使用calc() CSS函数，则通常意味着我需要Grid技术，而不是Flexbox。

如果您经常需要calc()函数来准确计算行和列的大小（例如，如果您需要考虑内部字段），这通常表明您应该考虑使用Grid技术，因为使用单位测量fr大大简化您的生活。 尽管作为一般性建议，此建议是可行的，但并未描述正在发生的事情的全部情况。 在构建布局时不使用calc()函数的情况下，有时也可能需要Grid。 例如，在我们正在讨论具有固定宽度的二维布局的情况下，其元素为200像素宽。 在开发这种布局时，不需要calc()函数来确定元素的宽度，但是同时，基于Grid构建的布局的行为可能非常有用。 同样，在某些情况下，最好使用Flexbox，而不可避免地使用calc()函数。 结果，我们在这里所说的最好不是硬性规定，就像这样：“使用calc()和Flexbox？ 因此，您需要切换到“网格”，但需要考虑的信息。

一维还是二维？

Grid和Flexbox技术之间的一个严重区别是，前者允许您控制二维（行和列）中元素的排列，而后者则不允许这样做。 同样，这并不意味着您永远不应该将Grid用于一维布局。 我经常选择网格-在那些我需要高精度来控制一维元素的大小和位置的情况下。 此示例在CodePen上的此示例中以及在随附的文章中得到了演示。


网格示例

元素应该如何表现？

在开发人员需要在二维上控制布局行为的情况下，使用网格技术通常很有意义。 但是，这并不意味着Grid总是比Flexbox更好。 使用网格时，开发人员可以使用行和列，单元格以及所谓的网格区域，它们是一个单元格或一组多个单元格。 使用网格时，元素必须位于这些单元格或区域中。

假设我们有一个基于网格的布局，其不同之处在于以下特征：在从左到右的三个元素的三行中有九个元素，这些元素之间有20个像素。 可以使用Grid和Flexbox来创建这种布局。 用于描述这种基于网格的布局的代码更加简单明了：

 .grid {   display: grid;   grid-template-columns: repeat(3, 1fr);   grid-auto-rows: 200px;   /*     ,   ,      .        , `auto`,  ,        . */   gap: 20px; } 

使用这种布局会导致这样的事实，即元素会自动放置，而我们无需执行其他任何操作。 如果我们有时间思考，可以使用Grid auto-fit()和minmax() ，这将使我们能够获得完全响应的布局，而无需使用媒体查询。 打开此示例，尝试调整窗口大小，然后看看会发生什么。


网格示例

通过观看此视频，您可以了解有关此技术的更多信息以及其他一些有用的信息。

如果我们使用Flexbox创建类似的布局，则与刚刚描述的示例不同，我们将需要对元素和容器进行样式化：

 .grid {   display: flex;   flex-wrap: wrap;   margin: -10px;   width: calc(100% + 20px); } .item {   width: calc((100% / 3) - 20px);   flex: 0 0 auto;   margin: 0 10px 20px 10px; } 

在这里，您需要在容器中为margin属性指定一个负值-为了抵消元素的总宽度大于容器本身的事实，从而将数据传输到下一行。 此外，如果没有我们的额外努力，此示例将无法演示相同的响应行为。 此外，应注意，此处可能需要使用媒体查询。

这是 CodePen上的一个示例，说明了上述内容。


Flexbox示例

有多种方法可以使用Flexbox创建相同的布局，但是所有方法都需要使用一些“技巧”，而发生这种情况的原因是这是其本质。 实际上，我们正在谈论的事实是，我们正试图将Flexbox技术用于并非真正打算使用的技术。 但这并不意味着Flexbox始终是布局基础的不成功选择。

许多现代CSS框架使用此方法的一些变体来表示布局。 顺便说一句，如果您想采用这种方式，我可以推荐Susy ，这是一套在创建此类布局时要克服所有困难的工具。

那么，在这种情况下最好选择什么呢？ 网格还是Flexbox？ Grid在这里似乎具有不可否认的优势，但是为了回答这个问题，我们需要考虑如果元素多于9个但少于12个（如果有），将会发生什么情况。例如12，那么这将允许他们完全填写新行）。 我们是否需要像在示例中看到的那样，将新元素简单地放在下一行的开头？ 还是我们需要他们表现不同？ 也许如果下一行中只有一个元素，那么我们需要它占据这一行的整个空间，就像下面示例中的选项A一样？ 或者，如果新行中只有两个元素，我们需要将它们居中，如示例B所示？


在最后一行放置项目的不同选项

当使用具有自动放置元素的基于网格的布局时，我们只有一个选择-将新元素放置在位于左侧的可访问单元格中。 在前面的示例中可以找到元素的类似排列。 在这里，我们从没有将direction属性设置为rtl的假设出发（在这种情况下，元素将从右到左放置，并且最后一行中的唯一元素将位于右单元格中）。 结果，在使用网格时，新元素将放置在以下可用网格单元中。 Flexbox技术使您可以灵活地控制项目的布局。 这意味着我们可以使用控制元素放置及其对齐方式的属性组合来控制元素的行为。

这是一个演示这种布局的示例，当使用该布局时，以三个元素计算的每行一个或两个元素占据整个行。


该项目占用所有可用的行空间。

结果，事实证明，无论用于创建布局的技术是什么，都归结于布局中的元素对开发人员所感兴趣的行为。 在不同的情况下，可以对同一问题给出不同的答案。

您是否要用网格替换Flexbox？

当我在各种活动中发言时，人们经常问我何时使用Flexbox代替Grid，以及我们是否真的需要像Flexbox这样的技术。 正如我们在前面的示例中看到的那样，Grid不能替代Flexbox。 两种技术都可以很和平地共存，并且对每种技术都能表现出最佳状态的了解扩展了布局设计的可能性。


组件示例

该图显示了在工作期间需要控制文本，图像和标题的位置的一个组件，既要考虑列又要考虑行。 同样，您还需要在一定程度上控制它们之间的交互方式。 令人满意地解决此问题的唯一方法是使用Grid技术。
但是，我会毫不犹豫地使用Flexbox技术创建一个导航菜单，如本示例中所示。


Flexbox创建的菜单

在这里，有必要在单个维度上控制元素的排列，并且元素的行为必须灵活。 Flexbox技术完美地完成了工作。 由于使用了Flexbox，您可以指定是否将这些元素换行，如果页面上的可用空间不允许您将所有元素显示在一行上，则可以准确地显示这些元素。

不支持Grid技术的浏览器中的布局应如何显示？

如果我们使用网格技术，那么我们需要考虑的可能问题之一就是对此技术的浏览器支持。 在这里，我们还需要考虑如果在不支持Grid的浏览器之一中显示我们的页面会发生什么情况（例如，在IE 11及以下版本中）。 解决此问题的方法是使用@supports规则并为不同的浏览器准备代码。 我经常（但不总是）代替相当老的浏览器使用基于Flexbox的布局来代替基于Grid的布局。

 .grid {   display: flex;   flex-wrap: wrap;   /*  ,     */ } @supports (display: grid) {   .grid {       display: grid;       /*  ,  Grid */   } } 

的确，在这里应该指出，如果您发现自己花费了很多时间尝试重新创建而不使用Grid，那么使用此技术所做的事情就可能从一开始就没有那么多使用网格有很多原因。 毕竟，这项技术特别出色，因为它具有Flexbox独有的能力。

总结

我们讨论了一些非常简单而广泛的布局开发示例，研究了在构建中使用Grid和Flexbox技术的功能。 我们希望我们能够为那些忙于为下一个布局选择正确技术的人们提供启发。

亲爱的读者们！ 在什么情况下使用Grid技术？在哪种情况下使用Flexbox？