CSS 函数 - minmax（）

CSS 函数 minmax（） 定义了大小范围，该范围从最小值开始，一直到最大值（包括在内）。

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

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

每个参数都可以具有以下值之一：max-content、min-content、<flex>、<length>、<percentage> 或 auto。
minmax（min， max） 函数用于表示当最大值小于最小值时的最小值。在此情况下，将忽略最大值。要设置网格轨道的弯曲系数，可以使用 <flex> 值作为最大值，但不能用作最小值。

可能的值

<length> - 大于或等于零的长度。
<百分比> - 此规则定义了与网格容器大小相关的非负百分比，该百分比根据列或行轨道进行调整。
<flex> - 一个尺寸，以 fr 单位表示为非负值，指定轨道的弯曲系数。
每个轨道的大小都设置为 <flex> 按其弯曲系数的比例共享剩余空间。
max-content - 表示占据网格轨道的网格元素对最大内容大小的最大贡献，由轨道中的最大元素确定。
min-content - 表示占据网格轨道的网格元素对最小内容大小的最大贡献，由轨道中的最大元素确定。
auto - 当用作最小值时，它表示网格轨道内网格项的最大最小大小（由最小宽度/最小高度定义）。如果将其用作 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（） 可用于：

打印本页