创建 Flexbox Flex 容器时会发生什么？

Desknumber

在我的理想世界中，CSS Grid 和 Flexbox 会一起出现，完全形成一个 Web 布局系统。然而，相反，我们首先获得了 Flexbox，并且由于它比浮动更擅长创建网格类型布局，因此我们最终得到了许多基于 Flexbox 的网格系统。事实上，许多人们觉得 Flexbox 困难或令人困惑的地方实际上都是由于这种尝试使其成为一种网格布局的方法所致。

在一系列简短的文章中，我将花一些时间详细拆解 Flexbox——就像我过去对 电子邮件营销列表 网格所做的那样。我们将了解 Flexbox 的设计目的、它的真正优势以及为什么我们不选择它作为布局方法。在本文中，我们将详细了解添加display: flex到样式表时实际发生的情况。



请使用 Flex 容器！ 为了使用 Flexbox，您需要一个作为 Flex 容器的元素。在你的 CSS 中，你使用display: flex：参见砸笔Flexbox系列1：display:flex；作者：Rachel Andrew ( rachelandrew )，作者：CodePen。让我们花一点时间思考一下display: flex真正的含义。在显示模块级别 3中，每个显示值实际上被描述为两个事物的组合：内部显示模型和外部显示模型。当我们添加时display: flex，我们实际上是在定义display: block flex。我们的弹性容器的外部显示类型是block；它的作用就像正常流程中的块级元素。内部显示类型是flex，因此直接位于容器内的项目将参与弹性布局。