大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

css如何使用minmax()函数

这篇文章主要介绍了css如何使用minmax()函数,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

创新互联建站是一家专业提供石嘴山企业网站建设,专注与成都网站设计、成都网站建设、H5页面制作、小程序制作等业务。10年已为石嘴山众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。

minmax()

minmax函数表示一个闭区间范围[min,max],当值小于等于min时,值等于min,当大于等于max时,值等于max.

min-content,max-content

minmax函数接收min-content,max-content参数,这两个参数表示内容最短和最长的内容长度。看下面案例。

    
      
        test1dsssss3333333 sssssssssssssss sssssssssssssssssss
        sssssssssssssssssss ssssssssssssssssssss
      
               

test2222222222

        

test 232232323233

        

min-content采用最短的内容长度

      
               

test

        

test 232232323233222222

        

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);       }

效果

css如何使用minmax()函数

可以看到,第二个项目的最小的内容宽度为第二个项目中的第一个p标签

css如何使用minmax()函数

当设置成minmax(50px,min-content)时,表示列宽最大的宽度也不能超过第一个p标签的内容宽度。

第三个项目的最大的内容宽度为第三个p标签的内容宽度

css如何使用minmax()函数

当设置成minmax(100px,max-content)时,最大的内容宽度不会超过第三个p标签的宽度

兼容性

css如何使用minmax()函数

跟fit-content函数一样,不支持ie,但对主流的现代浏览器支持还不错。

感谢你能够认真阅读完这篇文章,希望小编分享的“css如何使用minmax()函数”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


分享标题:css如何使用minmax()函数
网页路径:http://dzwzjz.com/article/igjiis.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP