Manuel Matuzovic：max() 的妙用

通过 Manuel Matuzović 的帖子，它又通过 Temani Afif 的演示。

.wrapper {
  margin-inline: max(0px, ((100% - 64rem) / 2)); 
}

您最好阅读 Manuel 对这里发生的一切的细致分析，但它基本上等同于以下更长的语法

.wrapper {
  max-width: 64rem;
  margin: 0 auto;
  width: 100%;
}

…其中

• max() 接受以逗号分隔的 CSS 数字值列表，其中应用的值是集合中最大的（或如 MDN 所说，最“正”）的值。
• 0px 是集合中的第一个值，确保最小值始终大于零像素。
• (100% - 64rem) 是集合中的第二个“值”，但它表示为一个计算（请注意，calc() 是不必要的），它从元素的完整可用 width（100%）中减去元素的 max-width（64rem）。剩下的就是元素没有占用的空间。
• ((100% - 64rem) / 2)) 平均分配剩余的空间，因为我们将它分配到元素的内联边界之间。
• max(0px, ((100% - 64rem) / 2)) 比较 0px 和 (100% - 64rem) / 2)。使用最大的值。在大多数情况下，这将是等式的结果，但如果 64rem 曾经大于元素完整 100% 宽度计算值，它将锁定该值为零，以确保它永远不会导致负值。
• margin-inline 是设置获胜值的属性，它将边距应用于元素的内联侧 - 这与将相同值设置到 margin-left 和 margin-right 物理属性的逻辑缩写相同。

它与 Chris 一段时间前分享的 想法相同，该想法使用 CSS max() 函数解决 “内部问题” - 一个支持全出血背景颜色的容器，同时使用 padding 限制其内部内容。

max()、calc()、margin-inline … 这些都是新式 CSS！ 而且 Manuel 正处于 100 天内撰写关于这些和其他现代 CSS 特性 的中心。

直接链接 →