作者：陈大鱼头

github： KRISACHAN

记录原因：2019年3月30日在深圳举行了第五届的CSS Conf，鱼头作为一枚CSS新手以及爱好者也报名参加了。如果想知道鱼头参加完之后的感受，可以看知乎问题“参加2019年03月30日深圳第五届CSSConf是如何体验？”的回答。会上分享学习了许多干货知识，因为怕自己遗忘，遂写文章，以便后续记忆。

分享嘉宾简介

《新时代CSS布局》的分享者是新加坡的国际知名CSS专家陈慧晶。陈慧晶老师的个人博客地址是：https://www.chenhuijing.com/。

陈慧晶老师的分享主题介绍如下：

CSS布局经常是令前端开发者头痛的一块工作。但是近几年来，浏览器不断发展，开始支持弹性盒子、网格布局、盒模型对齐等布局功能。这些CSS标准纯粹是为了应付网络布局而编写的。我们将深入了解这些新属性的特征，新时代的布局技巧、例子及最佳实践。希望听众会有所启发，利用这些新的CSS属性创造更符合浏览器本质的设计。

本次分享的在线Slide: https://www.chenhuijing.com/slides/53-cssconfcn-2019/

为什么纵向比横向难排？

在分享的开始，慧晶老师便抛出了上述的问题。

其实答案也很简单，就是因为在最初的时候，HTML跟CSS只是为了欧美国家而服务，而欧美国家文字排版又是横向的，所以最开始的设计也是也横向的文档流为主，到后面互联网不断发展，连接至全世界的时候，才有了纵向排版的需求，所以结论就是设计者一开始并没有考虑纵向排版，所以后续有需求的时候才会出现纵向比横向难排的问题，关于纵横布局的比较可以查阅鱼头的Hello CSS系列的CSS的逻辑属性与盒子模型。

然后慧晶老师便分享了互联网的发展史。关于这部分内容，有兴趣的也可以查阅鱼头的Hello CSS系列的序章-起源。

在这里，慧晶老师分享了一个很有趣的链接，就是可以查看最初的网页长什么样，链接在此：https://worldwideweb.cern.ch/browser/。

Web布局系统

在这一小节中，慧晶老师主要分享了Flexbox、Grid跟Box Alignment这CSS新时代布局的三大栋梁。

CSS布局部队

CSS布局部队是由以下以及其他的553个属性组成。因为CSS是个团队项目。只有各属性相互协调配合，才能把CSS的威力完全发挥出来。

浏览器的渲染过程

慧晶老师又介绍了浏览器的渲染过程，以下是原文摘抄。

如果要揭开CSS布局的神秘面纱，那就必须先熟悉浏览器的渲染过程。渲染引擎会把服务器发送过来的Source文档解析成浏览器能够明白的对象。而在渲染网页之前，浏览器会生成一个渲染树。这个渲染树是个中介性的结构（intermediary structure），是文档格式结构（formatting structure）的表示法。

CSS在解析的过程，会计算出每个元素和文本节点的每个CSS属性值。浏览器就会靠其中的取值来判断要生成哪一类的盒子。

CSS显示模块（CSS Display Module Level 3）

慧晶老师又介绍了**CSS显示模块（CSS Display Module Level 3）**，以下是原文摘抄。

CSS显示模块在这二十多年来，经过不少演变。从一开始的基本、到现在最新规范中一共有十七种属性值。此规范提出了两种显示类型，内部及外部。内部显示类型定义了元素内子元素的布局方式，外部显示类型则定义了元素怎样参与流式布局的处理。

CSS在解析的过程，会计算出每个元素和文本节点的每个CSS属性值。浏览器就会靠其中的取值来判断要生成哪一类的盒子。

CSS显示模块规范提出了两种显示类型，内部及外部。内部显示类型定义了元素内子元素的布局方式，外部显示类型则定义了元素怎样参与流式布局的处理。

Flex

在这部分慧晶老师主要介绍了Flex的语法以及使用技巧（关于语法部分，在此不再累述，有兴趣的可以翻阅MDN）。慧晶老师在介绍完Flex之后便开始了第一个栗子：自动margin是你的好友

在上面这个简单的例子，容器内只有一个子元素。我们可以运用margin来操纵它。如果不设定任何方向，盒子就会在容器的正中间。一行搞定水平垂直居中的问题。

然后慧晶老师提问到：“为什么块格式自动margin不垂直居中元素？”

原因是如果元素的高度设为auto，那浏览器在计算它的高度时，只会考虑元素内容及子元素，纵向没有已确定的空间来调整位置。即使元素设了固定的高度，别忘记它跟子元素是互不相关的。这很有可能是浏览器最初执行的抉择遗留下来的行为。浏览器没办法计算上下方的margin取值，所以就把auto取值解析成0。

容器–项目的「父子」关系

这是慧晶老师之前提到的转折点。因为flex或grid容器跟子元素的关系，在布局时是被浏览器承认的。因此，浏览器才有办法计算出四面的自动margin取值。

CSS盒式对齐模块

在这一节，慧晶老师对CSS盒式对齐模块(CSS Box Alignment Level 3)进行了介绍。

在这里，慧晶老师解释道：

当然，光靠自动margin是不够的。要更精确的调整子元素的位置，我们可以运用盒式对齐模块（box alignment）提供的属性值。

Flexbox的首个公开工作草案是在2009发布的，而Grid的则是2011发布。当时两个规范设定了两组不同的对齐属性。经过讨论，工作组决定把盒子对齐写成独立的规范，让过去、现在和未来的formatting contexts都统一使用相同的属性。

Box alignment的属性一共有六个。在使用flex时，用得上其中四个，使用grid的话，六个属性全部都能用。

鱼头注：这里具体的属性也不累述了，有兴趣的可以自行查阅[W3C][https://www.w3.org/TR/css-align-3/]或者W3C PLUS

Grid或者Flexbox?

“所以应该是用Gird还是Flex？”

关于这个问题的答案，慧晶老师回答道：

这不是个二选一的状况，应该是二合一才对。

Flexbox比较适合单维方向的布局。因为运用Flexbox来实现的行列，即使对齐了，也只是个假象。Flexbox的行跟列是互不相关的。但是在单维布局，它拥有最强的弹性功能。

Grid则适合做二维网格布局，因为Grid中的行列才是真实的，才是是有关系的。你可以像在棋盘上排棋子似的，把Grid项目排成理想的布局。

要实现类似上面布局的设计，用新时代布局方式是做得到的。要如何实现这种内容不对齐，环绕每个Grid单元厚厚的border？如果单靠Grid，用Box alignment属性，可以吗？

很可惜，做不到。之前有提过，Grid项目对齐的默认值是stretch。一旦用上任何以外的取值时，项目就会马上缩到内容的尺寸。可是如果我们在Grid项目上设一个display:flex，把它变成Flex容器。那表示Grid项目里面的内容，成为了Flex项目。现在利用Box alignment的各属性调整内容的位置就不会影响到Grid项目的尺寸，border也可以保持在Grid线上了。

百分比的局限（一致性的伸缩率）

慧晶老师原话：“现在已经相当普遍的响应式网页设计，主要是依靠百分比来设定元素的尺寸。运用百分比的局限就是每个元素伸缩率是一致的。有时，这会导致开发者为了应付各种viewport尺寸范围，被逼要写数不清的media query。

在深入研究这些新的布局模式时，我发现到最有趣的东西是灵活性尺寸。根据所设定的属性值，元素伸缩的变化率是有差别的。有些属性值会「坚持自己的立场」，在viewport变化的状况下，尽量保持范围内的宽度。这样讲有点难了解，还是看看一些用例吧。”

接下来慧晶老师主要是对以下三组属性进行了对比：

（鱼头注：关于上述属性对比，有兴趣的童鞋可以点击链接查看）

兼容处理

慧晶老师说：“Grid正式发布到现在，已经有大概两年的时间，浏览器的支持程度如今也高达88%，可以算是被广泛支持了。但是其它12%的用户该怎么办呢？”

上述问题其实CSS可以通过feature query做功能检测。它的语法类似media query，只是用的关键字是@supports

（鱼头注：关于@supports的使用，有兴趣的可以查看鱼头的文章[第一章-CSS的语法与工作流）

如果你喜欢探讨技术，或者对本文有任何的意见或建议，非常欢迎加鱼头微信好友一起探讨，当然，鱼头也非常希望能跟你一起聊生活，聊爱好，谈天说地。鱼头的微信号是：krisChans95 也可以扫码关注公众号，订阅更多精彩内容。

https://fish-pond-1253945200.cos.ap-guangzhou.myqcloud.com/img/base/qrcode-all.png