1. 首页
  2. css

CSS网格代替Flexbox了吗?

不,嗯。基本上没有。

网格比Flexbox更新很多,对浏览器的支持更少。这就是为什么人们想知道CSS网格是否可以取代Flexbox的原因:网格可以做Flexbox做不到的事情。

。flex项目可以是网格容器。

尽管网格非常新,但我们有很多关于它的文章,包括一篇入门文章,一篇关于以多种方式完成基本布局的文章,以及一个完整的指南。

如果你没有听到号角的鸣叫,2017年3月是网格的旗帜月。它是在Chrome、Opera、Firefox和Safari中发布的,完全没有修改,可以随时使用。甚至Edge也支持它,albiet是一个旧版本的规范,您可以通过使用Autoprefixer获得一些支持。

那么。

网格是否取代了Flexbox?一开始似乎有点复杂。尤其是如果你刚刚开始掌握Flexbox奇怪的、陌生的语法。现在还有一整套语法要学?嘘。

以下是Grid比Flexbox更擅长的一些东西:

  • 制作整个页面布局。即使仅仅考虑布局性能的原因,这样做也会更好。比如X列,它们之间有Y个间隙,是自制的框架。grid-gap太棒了,因为排水沟是网格系统的主要痛点。
  • 需要较少的媒体查询干预,具有非常强大的功能,如自动布局、minmax()repeat()auto-fill。这里有一个好主意。

还有一个大主意:网格可以定位二维元素。列和行。这是第一次。Rachel Andrew曾经非常清楚地指出:

Flexbox本质上是用于在一个维度(行或列)中布局项目的。网格是用于在两个维度(行和列)中布局项目的。

让我们看一些演示。

假设我们正在构建一个水平导航组件-这是Flexbox的完美用例,因为它只在一个方向上设置内容。在下面的Chris\”演示中,您可以随意使用这些属性,看看Flexbox有多强大:

,但有些情况下,这些Flexbox属性(如justify-contentalign-items)应该与网格属性一起使用。以这个演示为例:

首先,我们制作了一个.wrapper,设置为display: flex;。这样我们就可以在.grid上设置一个最大宽度,并使用justify-content: center;将其放置在视口的中间。然后我们可以用正确的列数来生成网格:

.wrapper {display: flex;justify-content: center;}.grid {display: grid;max-width: 800px;grid-template-columns: 1fr 2fr;}

这只是第一步。

现在让.ad占据整个网格。好吧,我们可以通过专门针对我们的<div>来做到这一点,而不会弄乱我们网格的其他子元素:

.ad {grid-column-start: 1;grid-column-end: 3;}

我们用上面的代码所说的是:\"在第一列开始这个div,在最后一列结束。\",比方说,我们一直希望我们的广告块是我们第一排的两倍大小-我们完全可以做到这一点!我们只需要使用grid-template-rows属性:

.grid {display: grid;max-width: 800px;grid-template-columns: 1fr 2fr;grid-template-rows: 1fr 2fr 1fr;}

,这相当于说:\"我们的网格中有三行。始终确保第二行的大小是第一行和第三行的两倍。换句话说,我们正在创建行和其他行之间的关系,同时还定义网格中的列数!使用CSS网格,我们可以在水平方向(使用grid-template-columns)和垂直方向(使用grid-template-rows)同时设置关系。另一方面,Flexbox被困在垂直或水平布局(使用flex-direction)中,但这并不意味着我们应该抛弃它。

潜在的混淆:使用Flexbox的\"2D\"布局可能会有点混淆,因为仅仅在Flexbox中创建多维布局并非不可能。例如:

那里肯定有行和列,甚至是跨越多个列的最后一个元素。它很容易建造和灵活。它是通过允许flex-wrap在容器上,让孩子的flex-basis是容器宽度的1/3,如果需要,允许flex-grow拉伸孩子。(flex属性是flex-growflex-shrinkflex-basis的缩写。)

这没有错,它只是这样做的一种方式,您可能会认为它不够直观和适应性。

可能会造成混淆:使用Grid的\"1D\"布局可以执行2D布局,即定义同时使用grid-template-rowsgrid-template-columns,但它不必同时使用这两者。下面是一个用它来水平排列盒子的演示:

这也没有错。事实上,你很容易

CSS网格代替Flexbox了吗? 为WP2原创文章,链接:https://www.wp2.cn/css/css%e7%bd%91%e6%a0%bc%e4%bb%a3%e6%9b%bfflexbox%e4%ba%86%e5%90%97%ef%bc%9f/

发表评论

您的电子邮箱地址不会被公开。