Manuel Matuzovic: max() 诡计

通过一个 曼努埃尔·马图佐维奇发表 这是通过演示的方式 特马尼·阿菲夫.

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

阅读曼努埃尔对这里发生的所有事情的详细分析对你自己是有好处的，但它基本上相当于这个更长的语法：

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

…在哪里：

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

这是同一种想法 克里斯不久前分享过 使用 CSS max()函数来解决 “内部问题” — 一个容器，支持全出血背景颜色，同时限制其内部内容 padding.

max(), calc(), margin-inline......这是很多新奇的 CSS！曼努埃尔就在中间 在 100 天内撰写有关这些和其他现代 CSS 功能的文章.

直接链接 →