资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

css如何使用minmax()函数-创新互联

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

创新互联建站是一家专注于成都做网站、网站设计与策划设计,通榆网站建设哪家好?创新互联建站做网站,专注于网站建设10多年,网设计领域的专业建站公司;建站业务涵盖:通榆等地区。通榆做网站价格咨询:18982081108

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://cdkjz.cn/article/dhpdec.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
成都企业网站定制成都法律咨询成都网站制作中国西部信息中心网站建设阿坝网站建设网站制作微商城开发四川电信机房托管成都网站优化

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图