当我们在使用 display: flex 的时候，浏览器到底发生了什么？ _display:

按我想法的话，css 网格布局（grid）和弹性布局（Flexbox）应该同时出现才对，这样网页布局方案就变得完整了。事实是，弹性布局先出现，因为使用弹性布局创建类网格（grid-type）系统比使用浮动更加便捷，于是我们便得到了许多基于 Flexbox 的网格系统。实际上，Flexbox 的优势并不是用来创建网格系统，这也是为什么有时我们在用它创建网格系统时，感觉很费劲的原因。

我准备开一个小系列的文章，花点时间解密一下 Flexbox——就像过去我在讲解 Grid 一样。我们将看到 Flexbox 的设计目的，它真正做得好的地方，以及为什么我们不选择它作为布局方法。本文中将会介绍当我们在使用 display: flex 的时候，到底发生了什么？
Flex 容器为了使用弹性布局，我们需要先有一个元素充当 Flex 容器的角色。容器使用 display: flex 声明：

文章插图

display: flex 到底做了什么呢？在 Display Module Level 3 规范中，定义每 display 属性值由两部分组成：内部显示模型（inner display model）和外部显示模型（outer display model）。我们使用 display: flex 的时候，实际定义的是 display: block flex 。Flex 容器的外部显示类型是 block，在文档流（normal flow）中表现为块级元素（block level element），内部显示类型是 flex，所以容器的直接子元素将参与弹性布局。
当然，我们还可以使用 display: inline-flex 定义 Flex 容器，与上面声明类似，它实际定义的是 display: inline flex 。Flex 容器表现的像个行内元素，其直接子元素将参与弹性布局。

文章插图

理解了元素的外部显示模型和内部显示模型，对理解元素及其子元素在页面中的表现行为非常有帮助。你可以将这种思路带入到任意其他类型的盒子中：这个元素的表现特征为何？它的子元素呢？答案是跟外部显示模型和内部显示模型有关。
行与列定义好 Flex 容器后，一些初始值就开始起作用了。在我们没有设置任何其他属性的情况下，所有的 Flex 项目会排列为一行。之所以如此，是因为 flex-direction 的初始值是 row 。
flex-direction 属性设置的是主轴（main axis）的方向，取值除了 row 之外，还包括：