CSS 函数

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

要设置网格项的大小限制，请在 CSS grid 中使用此功能。

最小值和最大值是该函数接受的两个参数。

  • 每个参数可以具有以下值之一:max-content、min -content、<flex>、<length>、<percentage> 或 auto。

  • minmax(min, max) 函数用于表示最大值小于最小值时的最小值。在这种情况下，最大值将被忽略。

    要设置网格轨道的弹性系数，<flex>值可以用作最大值，但不能用作最小值。

可能的值

  • <length> - 大于或等于零的长度。

  • <percentage> - 此规则定义相对于网格容器大小的非负百分比，该百分比根据列或行轨道进行调整。

  • 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( ) 可用于: