CSS 函数 - minmax()

该 CSS 函数 minmax() 定义了尺寸范围，该范围从最小值开始，一直到最大值（包含最大值）。

要为网格项目设置尺寸限制，请在 CSS 网格 中使用此函数。

此函数接受两个参数：最小值和最大值。

每个参数可以具有以下值之一：max-content、min-content、<flex>、<length>、<percentage> 或 auto。
当最大值小于最小值时，minmax(min, max) 函数用于表示最小值。在这种情况下，最大值将被忽略。

要设置网格轨道<flex>因子，可以将 <flex> 值用作最大值，但不能用作最小值。

可能的值

<length> - 大于或等于零的长度。
<percentage> - 此规则定义相对于网格容器大小的非负百分比，该百分比根据列或行轨道进行调整。
<flex> - 以 fr 单位表示的非负数值，指定轨道的弹性因子。

每个大小已使用 <flex> 设置的轨道都按其弹性因子比例共享剩余空间。
max-content - 表示占据网格轨道的网格元素对 max-content 大小的最大贡献，并由轨道中最大的元素决定。
min-content - 表示占据网格轨道的网格元素对 min-content 大小的最大贡献，并由轨道中最大的元素决定。
auto - 用作 min 时，表示网格轨道内网格项目的最大最小尺寸（由 min-width/min-height 定义）。如果用作 max，则对应于值 max-content。

语法

<minmax()> = minmax( min , max )

CSS minmax() - 网格布局

在以下示例中，函数 minmax() 在 CSS 属性 grid-template-columns 中使用，以创建响应式网格布局。
minmax() 函数设置网格列的最小和最大尺寸限制，并确保每列至少为 100 像素宽，但可以根据可用空间进一步扩展，从而实现灵活且可自定义的布局。

<html>
<head>
<style>
   .container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      grid-gap: 10px;
      padding: 15px;
   }
   .item {
      background-color: #3498db;
      color: white;
      text-align: center;
      padding: 20px;
      border-radius: 8px;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
      <div class="item">Item 7</div>
      <div class="item">Item 8</div>
      <div class="item">Item 9</div>
      <div class="item">Item 10</div>
      <div class="item">Item 11</div>
      <div class="item">Item 12s</div>
   </div>
</body>
</html>

CSS 相关属性

CSS 函数 minmax() 可用于

打印页面