flex实现网格效果_网格还是Flex？

最新推荐文章于 2024-08-16 14:53:15 发布

cuotangu3718

最新推荐文章于 2024-08-16 14:53:15 发布

阅读量847

点赞数

文章标签： java python 编程语言 css html

原文链接：https://css-irl.info/to-grid-or-to-flex/

版权

克里斯·科耶尔（Chris Coyier）最近发起了一个Twitter话题，让我思考人们通常如何解释CSS Grid Layout和flexbox的用例：

对于同时了解CSS网格和flexbox的所有人，您最喜欢的解释差异的方法是什么？
-克里斯·科耶尔（@chriscoyier） 2019年1月25日

当然，一些最有见地的回复来自Rachel Andrew和Jen Simmons：

Flexbox用于一维布局。行或列。网格用于二维布局。行和列。
-Rachel Andrew（@rachelandrew） 2019年1月25日

网格使实际的列和行。内容将按照您的要求从一个排列到另一个。 Flexbox没有。不仅在第二维（最容易谈论），而且在第一维。 Flexbox不适用于我们一直使用的大多数功能。
-Jen Simmons（@jensimmons） 2019年1月26日

但是，单独阅读推文并不能说明整个故事。在本文中，我想解开您可能在何时何地使用Grid或flexbox的包装，以及选择一个或另一个的一些原因。

让我惊讶的是，看到线程中的响应的人数很多，他们表示他们只会将Grid用于页面级布局，而将flexbox用于其他所有内容。如果您以此为原则，那么就电网的能力而言，您将受到严重限制。我要提供的主要建议是，分别进行每个设计，分析可用的选项并且不对您需要的技术做出假设。在选择布局方法时，您可能会问自己一些问题。

您必须做多少数学？

我对线程的贡献是：

如果看起来我需要大量使用calc（）进行布局，那么通常这是我何时需要Grid over flexbox的好兆头
-Michelle Barker（@ mbarker_84） 2019年1月26日

通常，如果您必须大量使用calc（）来获得精确的轨道大小（例如，根据装订线计算），则值得考虑使用Grid，因为fr单元会为您完成繁重的工作并为您节省任何数量头痛虽然这是一般原则，但不是全部。在某些情况下，即使您的布局不需要calc（） ，也可能需要Grid。一个示例可能是固定宽度的二维布局，其中每个轨道的宽度为200px-您不需要calc（）来告诉您这些轨道的宽度，但是您可能仍需要Grid的行为。同样，在使用flexbox的情况下，确实需要calc（） ，因此这只能解释为准则。

一维或二维？

Grid和flexbox之间的一个很大的区别是，Grid使我们可以控制二维（行和列）中项目的放置，而flexbox则不行。同样，这并不意味着您永远不应该将网格用于一维布局。当我需要精确控制一维中项目的大小和放置时，我经常选择使用Grid，如本演示和随附的文章中所述：

演示地址

您希望元素如何表现？

当需要控制二维布局时，网格通常是正确的选择。尽管这并不能使Grid成为所有事情的更好选择。使用网格时，您具有轨迹（行和列），单元格和网格区域（一组多个单元格），并且必须将项目放置在这些单元格或网格区域中。

假设我们有一个这样的布局：

我们有一个网格，该网格由三行相等的从左到右放置的九个宽度相等的项目组成，每个项目之间的间距为20px。我们可以使用Grid或flexbox构建它。网格代码更简单，更简洁：

.grid{
  display: grid ;
  grid-template-columns:repeat( 3 , 1fr );
  grid-auto-rows: 200px ;
  /* Assuming we want our rows to be a fixed height – could be left as the default `auto` if we want the height to respond to the content */
  gap: 20px ;
}

然后自动放置项目，而无需我们做任何其他事情。如果我们想对此变得真正聪明，可以使用Grid的auto-fit（）和minmax（）函数为我们提供完全响应的布局，而无需媒体查询-尝试调整此示例的大小，看看会发生什么。

演示地址

我建议观看Heydon Pickering的视频Algorithmic Layouts ，以了解有关此技术的更多信息。

相比之下，如果要使用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 ;
}

我们需要在网格容器上使用负边距来抵消以下事实：项目的总宽度将大于容器本身的宽度，并因此缠绕到下一行。我们也没有立即获得相同的响应行为，因此可能需要使用媒体查询。

演示地址

有几种不同的方法可以通过flexbox达到相同的布局，但是它们都有点怪异-这是因为。我们将flexbox用于并非真正设计的东西–但这并不意味着它总是错误的选择。

许多现代CSS框架在此方法上对布局使用一些变体。附带说明一下，如果您确实需要这样做，我是Susy的忠实粉丝， Susy可以为您处理数学。

那么，在这里哪个是更好的选择-Grid还是flexbox？ Grid在这里似乎有一些明显的优势，但是为了回答这个问题，我们需要考虑当我们有9个以上但少于12个（下一个允许它们填充一行的倍数）项目时会发生什么。。我们是否希望新项目像我们已经看到的示例一样简单地位于下一行的开头？还是我们希望他们的行为有所不同？也许如果下一行只有一项，我们希望它占用该行的所有可用空间，例如下面的示例A。或者，如果有两个项目，那么我们希望将它们居中，例如示例B。

使用网格布局和自动放置，我们只能像在前面的示例中那样，将最后一项放置在左侧单元格中的选项–假设direction属性的值未设置为rtl （在这种情况下，项将从右向左流动，最后一项将放置在右侧的单元格中。以下项目将放置在下一个可用的网格单元中。 Flexbox允许项目弯曲。这意味着我们可以结合使用flex和alignment属性来控制这些项目的行为。

演示地址

因此，无论您是为上面的布局选择Grid还是flexbox，实际上都取决于您希望网格项目的行为方式-在不同情况下可能会有不同的答案。

您是否要用Grid替换flexbox？

当我进行演讲时，我经常被问到何时使用弹性框而不是网格，以及是否还要使用弹性框。正如我们在上面的示例中看到的那样，Grid不能替代flexbox。两者非常愉快地共存，知道何时使用它们将为您的布局提供更大的功能！

在上面的组件中，我需要控制文本，图像和标题在列和行轴上的放置，并控制它们在某种程度上如何相互作用。令人满意的唯一方法是使用Grid。

但是我绝对会使用flexbox构建一个桌面导航菜单：

演示地址

在这里，我想在一个维度上控制流程，并且希望项目变得灵活 -flexbox确实做得很好。使用flexbox，我们可以选择是否包装这些项目，如果空间不允许所有项目都显示在一行上，则可以让它们优雅地包装。

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

如果使用的是Grid，则需要考虑的另一个问题是浏览器支持，以及我们希望在不支持Grid的浏览器（IE11及更低版本）中发生的布局问题。我的方法是使用功能查询来满足这些情况。我经常（但不总是）选择基于Flexbox的布局作为旧版浏览器的后备：

.grid{
  display: flex ;
  flex-wrap: wrap ;
  /* Rest of the fallback layout code */
}

@supports(display: grid ){
  .grid{
    display: grid ;
    /* Rest of the Grid code */
  }
}