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() 可用於

列印頁面