深入探索CSS布局：从盒状模型到弹性布局 (深入探索C++对象模型)

盒状模型

盒状模型是 CSS 中用于表示元素布局的基本概念。它将元素视为一个矩形框，由以下部分组成：

• 内容：元素的实际内容，如文本或图像。
• 内边距：内容和元素边框之间的空间。
• 边框：围绕内容的线条。
• 外边距：元素边框和周围元素之间的空间。

弹性布局

弹性布局是 CSS 中一种强大的布局技术，它允许元素根据可用空间灵活调整其大小和位置。它使用以下属性：

• flex-direction：指定元素在主轴上的排列方式。
• justify-content：指定元素在主轴上的对齐方式。
• align-items：指定元素在交叉轴上的对齐方式。
• flex-grow：指定元素在其可用空间中的增长方式。
• flex-shrink：指定元素在其可用空间减少时收缩的方式。

1

2

3

示例

1
2
3

在这个示例中，我们使用 flex-Box 类设置了一个弹性容器。它的子元素 flex-item 设置为 display: flex ，这使得它们沿主轴（水平方向）排列。

我们使用 justify-content: space-around 属性将子元素在主轴上均匀分布。我们还使用 align-items: center 属性将子元素在交叉轴（垂直方向）上垂直居中。

结果是三个子元素在容器中均匀分布并垂直居中。

结论