这些用于布局的新属性能用吗？

这个话题是@Rachel Andrew于2019年9月在 英国爱丁堡 举办的 Finch front 的一场演讲，其原标题是 Does it work? Using the new CSS Layout ，我在这里将其译为 这些用于布局的新属性能用吗？ 。这个话题中的内容非常的有意思，其中有些内容在小站上也有过相应的介绍。今天看了该PPT，觉得有些内容还是非常的有意思，值得和大家分享。

分享的主题

该主题的PPT比较长，总共有111页面，涉及到有关于布局多个新的知识点，如果你不想花时间阅读后面的内容，可以点击下图直接阅读PPT：

在过去，我们所接触到的Web布局都是一些最基本的布局，时至今日，Web布局系统变得更为复杂，但了变得更为灵活，而且这些汇总到一起可以称得上是一套布局的系统，该系统变得复杂而又灵活。简单地说，她将以 Grid 和 Flexbox 系统为主线，并由一系列CSS的概念和避属性来进行扩展，让Web布局更为灵活和强大。而这些概念也有利于我们更好的理解Web上怎么来更好的实现所需要的布局。

@Rachel Andrew这次的主题分享从整体的角度来看CSS的布局。通过这个主题的学习，我们可以了解到现代的Web布局和传统的布局有何不同，又有哪些CSS新特性来支持现在或将来的Web布局。在接下来的内容中，我们将会了解到CSS的 Grid 、 Flexbox 、 多列布局 、 BFC 、 书写模式 和关于 滚动 的一些特性。如果你对这方面感兴趣的话，欢迎继续往下阅读。

CSS是独特的也是令人惊奇的

社区总是有一种声音，特别是今天有众多优秀的JavaScript框架出现的时候，这种声音在社区中更为强烈：

CSS很简单，没有任何技术含量。

听到这种声音，我总是喜欢用下图来反驳：

看到上图，估计很多人又要说我矫情了。事实上呢？只有自己心理才明白。

回到CSS的世界中来，CSS在很多开发人员中是太微不足道了，也从不担心CSS有什么难度，但是很多开发人员又不理解CSS，甚至觉得要理解CSS太难了，有的时候甚至会让自己抓狂。

这也正是CSS独特和令人感到惊奇之处。

这里推荐几篇文章给大家：

• Understanding Specificity in CSS
• Learning CSS by reading specs
• How to Read W3C Specs
• Understanding the CSS Specifications
• What CSS Developers Do and Why You Need One

上面这几篇文章有助于你更好的阅读W3C的规范，更利于你提高自己CSS方面的能力。

提高CSS水平最好的方式是掌握如何阅读W3C规范？

普通流

普通流实际上就是大家平时所说的文档流（实际上在规范中没有文档流这个词，只不过是大家习惯性用文档流这个词而以）。普通流是CSS中最为基本的概念，也是重要的概念之一。而在Web的布局世界中， 普通流又被称为无布局的布局 。

默认情况下，HTML中的元素都会按照其在HTML源码文档中的先后位置从左至右自上而下依次堆叠：

不过上面这种说法仅仅是以前的一种说法，对于现代的Web来说，HTML中的元素不仅仅是从左至右自上而下依次堆叠，也有从右至左自上而下依次堆叠，比如“ 人民网阿文版 ”，它就是一种 从右向左自上而下堆叠 ：

而源的顺序（普通流）又是非常重要的，比如用户在使用 tab 键来操作你的页面时，会显得尤其突出：

另外一点，一个具有好的源的顺序的文档，更有利于用户阅读你的文档，如果你想检验你的文档流是否写得好，可以通过不添加任何（仅运用客户端默认的样式规则）样式来查阅你的Web：

不管是在HTML中使用 dir 属性，还是在CSS中使用书写模式（ writing-mode ）属性都可以让你较为轻易的处理普通流的顺序。除此之外，在CSS Grid和Flexbox布局中，还可以有其他的姿势来改变源的顺序，比如在Flexbox中给Flex项目显式设置 order 属性，比如在Grid中使用 grid-column 、 grid-row 或 grid-area 等属性显式指定Grid项目位置等。在后面我们会多少聊到这方面的知识点。

Grid或Flexbox

是选择Grid还是Flexbox，这是一个可怕的问题。

我们用如何实现列布局来举例。比如我们要实现类似下图这样列布局的效果：

早年的Web布局方式中，可能首先会考虑到的是 CSS浮动（ float ） 。只不过使用浮动布局，需要每个列的宽度。如果每列的宽度用的都是百分比来设置列的宽度时，当浏览器窗口缩小到一定的程度（没有足够宽度容纳列的内容时）很可能会出现列的换行。

除此之外，使用浮动布局还有一些其他的问题，最起码你总要考虑在有浮动的地方使用清除浮动。如果从CSS的最初设计原则来说，浮动也不是用来处理Web布局的，而是用来实现文本围绕图片（元素）的排版效果。只不过在特定的历史环境之下，使用他来实现我们想要的Web布局效果。

随着CSS的新特性的出现，Web的布局不在局限于其中的一两种方案。同样拿列的布局来举例，实现列的布局有很多种方式。咱们先来看多列布局。

多列布局

在CSS中有专门为多布局的属性，那就是 CSS Multi-column Layout Module Level 1 模块中提供的 column-* 、 columns 和 break-* 等属性。我们可以使用这些属性轻易的实Web多列布局。比如使用：

column-count
column-width
column-gap
column-span
break-inside

我们来看一个使用这些属性实现的多列布局：

.columns {
    column-count: 3;
    column-width: 25vw;
}

section {
    break-inside: avoid;
}

.columns h1,
    section h2 {
    column-span: all;
}

实际是多列布局的属性在不同的浏览器得到的效果不一样：

在多列布局当中，默认情况下，列的宽度是灵活的，会根据容器自动计算，比如上面的示例中，如果把 column-width 样式禁用掉，改变容器宽度时，列宽度也会自动调整，效果如下：

有关于多列布局更多的介绍可以阅读下面相关文章：

• CSS Multi-column Layout Module Level 1
• When And How To Use CSS Multi-Column Layout
• Multi-column manipulation

不容忽视的 display

display 属性我想大家都熟悉，如果用一句话来描述的话：

CSS的display属性可以用来改变元素的视觉格式化模型，即改变框的类型。

要彻底理解 display 属性将需要了解CSS的基本概念，比如视觉盒模型、盒模型等。建议大家花点时间阅读下面这几篇文章：

• 视觉格式化模型
• CSS 盒模型
• display