minmax（）默认为max

  • Z时代
  • 2024-01-10
  • 分类：问答

我试图设置minmax()的grid-template-rows和有趣的是，结果是网格行扩展到的最大minmax()，而不是分钟。

我们如何才能使网格行保持在最小声明的大小，然后又添加更多内容-网格行将扩展到最大声明的大小，而不是更多？

这是一个例子：

body {
  background: gray;
  border: solid black 1px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: minmax(50px, 150px);
}
aside {
  border-right: solid 1px red;
}
aside.homepage {
  background: blue;
}
<aside></aside>
<aside class="homepage">
  <header></header>
  <main></main>
  <footer></footer>
</aside>
<aside></aside>

回答：

很明显，主要的浏览器默认使用该max函数中的minmax()值。

规范定义尚不清楚这是怎么回事- min还是max默认？–应处理：

定义一个大于或等于 min 且小于或等于 max 的大小范围。

如果 max <min，则将 max 忽略并将minmax(min,max)其视为 min 。

最大值是<flex>设置轨道的弹性系数的值；至少无效。

我可能还没有在轨道大小调整算法中发现这种行为。

这是解决该问题的另一种方法：

  • 将行高度设置为auto（基于内容的高度）

  • 管理网格项目的最小和最大高度

    body {
      background: gray;
      border: solid black 1px;
      display: grid;
      grid-template-columns: 1fr 2fr 1fr;
      grid-template-rows: auto;  /* adjustment */
    }
    aside {
      border-right: solid 1px red;
    }
    aside.homepage {
      background: blue;
      min-height: 50px;   /* new */
      max-height: 150px;  /* new */
    }
    <aside>aside</aside>
    <aside class="homepage">
      <header>header</header>
      <main>main</main>
      <footer>footer</footer>
    </aside>
    <aside>aside</aside>

以上是 minmax（）默认为max 的全部内容， 来源链接： utcz.com/qa/419782.html

回到顶部