理解calc()函数

Question

海登皮克林写了一篇关于模拟容器查询的文章。他写道，容器的CSS应该如下所示：

.container {
  display: flex;
  flex-wrap: wrap;
  --margin: 1rem;
  --multiplier: calc(40rem - 100%);
  margin: calc(var(--margin) * -1); /* excess margin removed */
}

容器的子容器的CSS应该是：

.container > * {
  min-width: calc(33% - (var(--margin) * 2)); /* remove from both sides */
  max-width: 100%;
  flex-grow: 1;
  flex-basis: calc(var(--multiplier) * 999);
  margin: var(--margin);
}

我只是想了解--multiplier自定义属性是如何工作的，比如40rem - 100%在哪里，什么是100%？

希望这是合理的。

Answer 1

CSS中的百分比相对于父服务器。

因此，在本例中，calc如下所示：40rem - 100% [of the width of the parent]。

提交人在他们的帖子中解释说：

如果容器为40 the或更多，则计算值为负值；如果容器小于40 the，则为正。

示例：

• 如果父元素为20 the，则结果为40rem - 20rem，因此为20rem；
• 如果父元素为80 the，则结果为40rem - 80rem，因此为-60rem；

在calc()函数中，您实际上可以混合多个单元(em、vmin、%、px等)，最后它们都是长度单位，因此彼此兼容。

Answer 2

100%只与变量所应用的任何属性有关。

--multiplier只是一个变量，在这个用例中，它与在使用它的地方输入它的内容没有什么不同。

所以在这种情况下：

flex-basis: calc(var(--multiplier) * 999);

是相同的

flex-basis: calc(calc(40rem - 100%) * 999);

并且100%与flex-basis属性有关，并且相对于目标父级。您可以了解这对flex-basis的影响，特别是在关于MDN的基本值部分中。