那个盒子有多大？了解 CSS 布局中的大小调整

Desknumber

当开始使用 Flexbox 和 Grid 时，发现有时无法获得我们期望的布局可能会令人沮丧。这通常是由于这些新布局方法中计算大小的方式造成的。在这篇文章中，我试图准确解释那个盒子有多大，以及它是如何达到这个大小的！

Flexbox 和网格布局的一个关键功能是它们可以处理网格和 Flex 项目之间、周围和内部的可用空间分配。很多时候这都是有效的，我们不需要非常努力就能得到我们所希望的结果。这是因为规范试图 电子邮件营销列表 默认最可能的用例。然而，有时您可能想知道为什么某些东西最终会达到现在的大小。或者，您可能想做一些与默认行为不同的事情。为此，您需要了解底层算法如何确定如何分配空间。



在这篇文章中，我将与您分享一些关于 CSS 中框大小的有趣事情。我从规格中挑选了一些我认为对于准确了解该盒子有多大至关重要的内容。花一些时间通读一遍，我想您会发现 Grid 中的大小调整不再那么神秘！

我们可以从最熟悉的尺寸开始。CSS 值和单位模块规范中描述的长度单位。如果您将其视为<length>CSS 属性的允许值，则它表示此处列出的值之一。这些值都是距离，通常由整数加上单位标识符组成 - 例如12px或1em。如果该值为0单位标识符，则可以省略。此外，长度单位分为相对长度和绝对长度。

参加关于前端、设计和用户体验的精彩研讨会，包括实用要点、现场会议、视频录制和友好的问答。与布拉德·弗罗斯特（Brad Frost）、史蒂夫·沃尔特（Stéph Walter）和其他许多人一起。

跳转到研讨会 ↬功能面板相对长度 相对长度需要相对于其他事物调整大小，因此，如果相对长度发生变化，则使用相对长度定义的事物的最终大小可能会有所不同。