css grid布局中的minmax()函数的使用

minmax函数是作用在项目上的属性,单独将这个属性拿出来记录是因为你minmax的作用非常多,需要一条条分析.
minmax的作用是限制项目的大小在某个范围之间,minmax函数的第一个参数就是最小值,第二个参数是最大值.
minmax函数可以接收的参数:
1.固定长度值(以px为单位)
2.百分比值
3.弹性值
3.min-content
4.max-content
5.auto

使用固定长度minmax()函数使用长度（length）也许是最简单的值，就是一个基本的长度。例如，这有一个简单的一行三列的网格。

使用minmax()函数，可以指定网格中黄色单元格宽度保持在100px至200px之间。随着浏览器窗口的大小改变，这绝对值将会改变，但总是在这两个范围之内变化。

.grid { display: grid; grid-template-columns: minmax(100px, 200px) 1fr 1fr; }

注意这里的代码,当元素被创建时默认长度就是设置的最大值(200px)
2.使用百分比
minmax()函数除了可以使用length单位之外也可以使用百分比单位。如果我们把黄色网格设置了最大值为50%。表示黄色网格最大宽度是网格容器宽度的一半，但最大值不会有小于200px的值。

无论浏览器视窗缩到多小，黄色网格宽度都不会小于200px。但是，当网格容器有足够的空间时，黄色网格宽度始终都会是容器宽度的一半。
3.弹性长度

.grid { display: grid; grid-template-columns: minmax(200px, 1fr) 1fr 1fr; }

当元素第一次被创建时容器空间三等分后大于200px时,黄色元素即为容器三分之一;小于200px时黄色元素为固定的200px.
4.max-content

.grid { display: grid; grid-template-columns: minmax(max-content, max-content) 1fr 1fr; }

max-content代表当项目中有文字时,宽度为恰好容纳文字.
5.min-content
min-content关键词和max-content一样，是一种特殊的值。它代表单元格最小宽度，可以不让内容溢出单元格，除非是不可避免的。

.grid { display: grid; grid-template-columns: minmax(min-content, min-content) 1fr 1fr; }

6.auto
最后介绍auto值。minmax()函数的最小值和最大值使用auto，将会有不同的含义，其含义也取决于minmax()函数的最小值和最大值。

如果用于最大值，那么auto值相当于max-content值；如果用于最小值，那么auto值相当于min-content。最大的最小尺寸不同于min-content，它通过min-width或min-height来指定。

为了说明这一点，下面的的示例中，黄色的网格单元格使用minmax()函数，并且最小值和最大值都设置auto。

.grid { display: grid; grid-template-columns: minmax(auto, auto) 1fr 1fr; }

原文链接:https://www.w3cplus.com/css3/how-the-minmax-function-works.html