Flexbox和网格, 你的布局好助手

原文出处 Flexbox and Grids, your layout’s best friends

让所有的浏览器都支持CSS网格布局大概花了六年多的时间。从CSS网格出现开始,其自身规范就充满了争议。在2011年,它依然遭遇了很多质疑,与此同时,微软的开发团队宣布IE10支持带前缀的网格布局。但由于缺少与W3C提案相关的信息,有一些开发者还是在怀疑是否有必要使用新的布局系统,因为彼时已经有了float,table和一些浏览器使用hack方法支持的Flexbox模型。

不过,多亏了很多开发者和CSS工作组的一些成员(比如Rachel AndrewJen Simmons)的工作,随着网格布局的宣传逐渐增加,有很多实现也在一夜间浮现。

2017年3月,主流浏览器基本都支持网格布局了,但关于网格规范,仍然还有一些小小的谜团和流言尚未解决。本文的目的就是解决这些小问题,让大家享受网站开发的乐趣,也把我们在Aerolab新开发的布局技术(我们称作Frids布局)介绍给大家。

有句话说“网格时代到来了,Flexbox结束了”,或者是”网格已经上线,我们应该把Flexbox当作网格布局的降级版”,这样的观点很可能是有问题的。我希望大家能避免这种思维方式。

所以先让我们一起看看这些谜团,以便深入理解这两种同时使用的技术,而不是把它们独立区分开来进行比较。 我们也会看一个现在已经在生产环境里的真实用例,在本文最后,你会看到一个HTML和CSS的样板,这样你也可以开始使用Flexbox和网格了

打破神话

关于”网格 vs. Flexbox“的一系列流言,从2010年就开始萌发了,这其中只有我前面提到的两个才是真正值得辟谣的。

  • Grids arrived to kill Flexbox.
    网格的到来结束了Flexbox的时代。 ”不,今晚只有一个人会死,那就是你,虫尾巴表格布局!“ 人们历来倾向于把技术(或者人...)相互对立起来;尽管对比和竞争通常来说是对产业有利的,但这并不适用于我们讨论的这个情况。

网格和Flexbox差不多是在同时开发出来的,但是它们解决问题的思路是不同的,后面我们会深入分析这一点。如果读完本篇你还是有一些疑惑,那你就记住网格(1)和Flexbox(2)在W3C起早时,是一样的编者起草的。它们是协同工作的,而不是用来相互竞争的。

  • Flexbox是网格的回退版。
    如果你看到了金色飞贼,就不要去管鬼飞球了。 我们看下前面提到的一点:Flexbox的目标和网格的是不一样的。因此,我们不应该降前者视为后者的降级版,再说了,IE浏览器对它的支持和对网格布局的支持一样差...

使用Frids布局

让我们看一下这两者不同的用例,以及它们是怎样相互补充的。

  • 一维布局
    如果你需要对你的内容进行一维布局,不管是水平的x轴还是垂直的y轴,而且你需要布局根据元素内容自适应,那么Flexbox就是你要找的工具。对于组件而言,它(但并不局限于此)就是合适的布局方案。

  • 二维布局
    如果你需要根据x轴和y轴来展示你的内容,这就意味着,你需要的是,网格!这个属性是用于处理复杂、非线性组件的页面布局的理想工具。

当然,规则总有例外,但对于大多数复杂的视角布局使用网格,对一行(当然如果需要多列的话,就用flex-wrap属性)内容使用Flexbox,你的工作就会顺手的多

在2017年,开发者对Flexbox比对网格更熟悉,所以如果你还没有在生产环境中见过网格布局,我强烈推荐你看一下Full Stack Fest Barcelona这个网站。他们在speakers section的页面上用的网格布局非常棒。 Img

尽管目标不同,它们仍共享很多属性,毕竟它们是两种不同的布局工具。它们公有的属性是CSS Box Alignment Specification的一部分,全世界的开发者都为此呼吁了很长一部分时间。你还记得垂直居中那地域般考验么?现在的开发者真是赶上好时代了。

盒模型对齐规范

新规范包含了内容分布以及自动对齐的功能,并且可以应用到任何网格或者Flexbox中的块元素上

在Flex容器内对齐元素.

flexbox-align-css

在Flex容器内排列元素.

flex-distribute-container-css

在网格容器内对齐元素 .

grid-container-align-css

我们先停下仔细看一下前面的例子。 首先,我们使用repeat()创建了一个三列的网格,每一个列是1fr宽;然后,我们使用align-items和justify-items 在X轴和Y轴对齐每个单元格,然后使用align-self和justify-self是元素伸展到合适的高度。

如果你也比较熟悉Flexbox,你会发现这些属性都是flexbox布局公有的属性。主要的差别其实就是我们没有用“flex-start”或者“flex-end”,而是与之对应用了start和end。

在网格容器中排列元素.

grid-distribute-container-css

Flexbox和网格很快要共享的一些属性里,有这样一个系列:grid-gap。这个功能是很多开发者一直想要的,它能帮我们轻松指定flex元素的间距。 grid-row-gap和grid-column-gap分别重命名成row-gap 和column-gap了。不过别担心!你现在的代码还是可以正常工作 ❤️ 。 flexbox-grids-gap

同时使用Flexbox和网格

创建网格之后,你就需要往每个网格单元增加内容了。无论增加图片、文字或两者都有,把它们放在合适位置的最好的办法就是使用Flexbox。 flexbox-grids-together

拥抱自适应性

与浮动或其他传统布局系统不同的是,Flexbox和网格是在多设备时代出现的。因此,它们建立在这些其他方法所缺乏的流动性和自适应性上。你会发现,有很多方法可以使这两种布局方式适应用户的屏幕。

流动Flexbox布局

Flexbox默认就是自适应的。一旦你对一个元素使用看 display: flex ,你就已经有一个流式布局了,不过这也取决于你有多少内容,需要给元素加上一个最小宽度。如此以来,你就可以方便的利用flex-basis和flex-wrap这两个属性了。 flexbox-grids-wrap-css

流式网格布局

要确保你的网格布局总是自适应的以及它的元素都有一个最小宽度,我们可以使用minmax函数和新的fr单位。设计的这个单位就是为了帮助我们方便创建灵活的网格。1fr就等于网格系统里可用的一个单位空间。它会把单元之间的距离包含在网格内,因此它基本帮我们计算出每个元素自身合理的宽度。 grids-full layout

如果你希望在小型的设备上改变布局,你依然可以使用media queries。

准备部署

由于在所有的主流浏览器上有了很好的支持,因此网格和Flexbox都已经适用于生产环境。微软的Edge 15还只支持旧语法的网格布局,Edge 16已经在10月17号Windows 10 秋季创意者更新 发布的新版中解决了这个问题。

如果你希望所有浏览器(为你点赞!)都支持,那么强烈建议你用feature queries,在不支持网格的浏览器上使用旧的布局系统。

  .grid-parent{ 
        / _Fallback layout_ /
  } 

  @supports (display: grid) { 
    .grid-parent{ 
        / _Use grids_ / 
    }
  }

最后提一下,记得看一下已经报出的bug,这里是网格的这是Flexbox的

MagicCube的经验

MagicCube联系我们Aerolab,要帮他们设计新形象,并开发新网站。

新版的UX和UI的提议确定后,我们就能看到一个亟待使用CSS网格系统实现的好产品。因为它已经有一个复杂的布局,我们决定使用这些新技术和feature queries来实现,在不支持的浏览器上使用旧的布局,在新的浏览器上使用Flexbox组织元素。网格使我们更快更好的定制页面内容,给我们提供了足够的灵活性来应对各种不同多变的需求。 grids-magic cube

我们想确保为每个人都提供良好的浏览体验。因此,对于Opera,三星和UC浏览器,我们用了一种优雅的CSS支持的降级技术来显示一个替代方案的简单布局。

最终的结果,就是一个完全自适应符合无障碍浏览的新网站。用户浏览时,支持的浏览器会显示复杂的布局,不支持的会使用降级后的简单布局。CSS网格使我们能够用一种快速、高效的方案来改变不同的设计模式。

使用网格和Flexbox

别让麻瓜都能打败你--从今天起就开始使用CSS网格吧。那些关于Flexbox vs. 网格的杞人忧天的言论,不应该成为你的绊脚石。你应该从今天就使用新的方法来建立自己的网站。便利的定制化和足够多的浏览器支持已经足以让你在每天的工作中使用它们了。

如果你还在犹豫从哪开始,那就往下滑,我们提供了一些可以下载的模板供你使用。

资源

刚开始学习和使用CSS网格技术起初会比较枯燥。不过下面有很多资源可以帮我们渡过难关:


  • 我们忠实的老朋友。开始思考网格结构的最好方法就是在纸上画出来。你就能看到那些你即将开始做的列、行和间距。在纸上涂鸦并不会花你很长时间,但它能帮你更好的理解整个网格的布局。

  • 开发者工具
    Firefox开发者工具有一个很好的内置CSS网格调试工具,它能帮你清晰的看到行、列和网格间距。 firefox-dev tools

    Chrome released a similar tool, check it out Chrome也发布了一个类似的工具,点这里.

  • 阅读、学习,练习!
    假如你还没有机会尝试CSS网格,那么你可以看看下面这些有趣的链接: