css如何使用minmax()函数-创新互联
这篇文章主要介绍了css如何使用minmax()函数,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
创新互联建站是一家专注于成都做网站、网站设计与策划设计,通榆网站建设哪家好?创新互联建站做网站,专注于网站建设10多年,网设计领域的专业建站公司;建站业务涵盖:通榆等地区。通榆做网站价格咨询:18982081108minmax()
minmax函数表示一个闭区间范围[min,max],当值小于等于min时,值等于min,当大于等于max时,值等于max.
min-content,max-content
minmax函数接收min-content,max-content参数,这两个参数表示内容短和最长的内容长度。看下面案例。
.minmax-wrapper { margin-top: 100px; width: 100vw; display: grid; grid-gap: 10px; grid-template-columns: minmax(300px, 500px) minmax(50px, min-content) minmax(100px, max-content); }test1dsssss3333333 sssssssssssssss sssssssssssssssssss sssssssssssssssssss sssssssssssssssssssstest2222222222
test 232232323233
min-content采用短的内容长度
test
test 232232323233222222
max-content采用最长的内容长度
效果
可以看到,第二个项目的最小的内容宽度为第二个项目中的第一个p标签
当设置成minmax(50px,min-content)时,表示列宽较大的宽度也不能超过第一个p标签的内容宽度。
第三个项目的较大的内容宽度为第三个p标签的内容宽度
当设置成minmax(100px,max-content)时,较大的内容宽度不会超过第三个p标签的宽度
兼容性
跟fit-content函数一样,不支持ie,但对主流的现代浏览器支持还不错。
感谢你能够认真阅读完这篇文章,希望小编分享的“css如何使用minmax()函数”这篇文章对大家有帮助,同时也希望大家多多支持创新互联网站建设公司,,关注创新互联行业资讯频道,更多相关知识等着你来学习!
标题名称:css如何使用minmax()函数-创新互联
文章网址:http://pwwzsj.com/article/dhpdec.html