请选择 进入手机版 | 继续访问电脑版
Mozilla

火狐社区

登录    注册

用新浪微博连接 QQ互联

新的 Flexbox 参考指南已上架 MDN

yingliu Mozilla员工 发表于 2018-3-1 11:05:20 | 显示全部楼层 [复制链接]
2 4350
本帖最后由 yingliu 于 2018-3-1 11:09 编辑

本文作者:Rachel Andrew

去年三月准备要在浏览器上推出 CSS Grid 时,我整理了一些关于 CSS Grid 模块的指南和参考材料,这些资料已在 MDN 上架。在那之后,我们觉得不妨也针对 Flexbox 提供更完整的文档,于是我也更新了 Flexbox 的数据,借此提供 Flexbox 的核心使用场景(use cases)。

结果是令人满意的。以这些模块目前的发展而言,Flexbox 可谓与 Grid 和 Box Alignment 并肩提供 Web 布局的新思考方向,而我们认为有必要在文档中充分反映现状。

flexbox.jpg

新增文件一览

我在 MDN 上新增8个文件:

通过这些数据,我希望 Flexbox 能被视为整体布局系统的一部分。在 Grid 上线以前,Flexbox 曾被当成解决所有布局难题的标准工具,但在建立二维布局的任务上,Flexbox 并不好用;相较之下,Grid 本就是为了二维布局而设计的。这等于是硬用 Flexbox 做它本来就不拿手的事情。

因此,在新文档中,我特别关注 Flexbox 真正的应用场景,讨论哪些情况该改用 Grid,并且说明 Flexbox 该如何与 Writing Modes、Box Alignment 与项目排序搭配。

布局「课程表」

常有人问我是否应先学 Flexbox 再学 Grid Layout。与其思考孰先孰后,我想建议大家先搞懂各模块的基本特点和功能,以及各个模块适用的情况。以生产型的网站来说,应该会有一些既有的图案,所以可以以 Flexbox 为主、以 Grid 为辅来布局。

在 MDN 上,请先参考 Basic Concepts of flexbox(Flexbox 的基本概念),并搭配 Grid 的相应文件——Basic concepts of grid layout(Grid Layout 的基本概念) 阅读。然后,请再看这两篇有关 Flexbox 和 Grid 在 CSS Layout 中用途的说明:

这些资料应该足以让你有大概的了解。等你真正使用这些方法设计图案时,还可再参考个别模块详尽的指引。

Flexbox 和 Grid 的共同点

等你进一步了解 Flexbox 和 Grid 后,你会发现两者有很多相似之处。这是出于设计的本意。从 Grid 的模块说明便可见一斑:

「若发现 Grid Layout Module 和 Flexible Box Layout Module 之间不相符的问题,这恐怕有误,请通报 CSSWG。」

原隶属于 Flexbox 模块的 Box Alignment 属性已移入其专属模块——Box Alignment Level 3 中。Grid 以该模块为参考,而非直接复制其属性。因此,你应该会发现 Aligning items in a flex containe(在 Flex container 中对齐项目)Box alignment in Grid Layout(Grid Layout 的 Box Alignment) 两份文档很相似。从许多层面来说,使用 Grid Layout 来执行 alignment(对齐)比较容易理解,因为一直都有两轴可参考。

另一方面,有的 Grid 属性也会移到 Flexbox。Grid 有个叫做 grid-gap 的属性,它提供设定 grid-column-gapgrid-row-gap 的简单方法。这些属性今年也将移到 Box Alignment 规格中,并各自更名为 gap、column-gap 和 row-gap。待浏览器导入这些 Flexbox 属性后,以后若要增加项目之间的间隔,Flexbox 也可和 Grid 一样使用间隙(gap),而不必靠边界(margin)。

浏览器对 Flexbox 的支持

浏览器对 Flexbox 的支持已相当广泛。对此,我已在Backwards compatibility of flexbox(Flex 的向下兼容性) 文档中详细说明。现阶段的问题是,部分旧版浏览器的供货商前缀(vendor prefix)支持的是较旧的 Flexbox 模块。这些问题已经记录在我的 MDN 指南及 Flexbugs 网站上。Flexbugs 网站还详细说明了相互操作性的问题及一些变通方案。

Flexbox 和 Grid 现在都是 W3C 的候选推荐(Candidate Recommendation)标准,因此技术规格都应不会有大幅的变动,你可以放心地学习,并将它们应用到生产型网站上。

布局方式的新思维

有了 Flexbox 和 Grid,再加上相关的 Writing Modes 与 Box Alignment 语法,我们便有了全新的 Web 布局模块,而这些模块的设计就是专为打造我们想要建立的布局所设计的。习惯运用浮动(float)语法来布局的人必须改变思维,不要太安于现状,才能创造出更多的可能性。无论你是想设计出更有创意的布局,或只想简化 UI 的开发,我都希望这些文档对你有所帮助。



Meteor 千年狐妖
发表于 2018-3-9 16:24:15 | 显示全部楼层
不错
310971373 狐狸精
发表于 2018-3-22 20:48:36 | 显示全部楼层
有中文版吗?
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表