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

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

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

minmax()

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

min-content，max-content

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

    <div class="minmax-wrapper">
      <div class="minmax-item">
        test1dsssss3333333 sssssssssssssss sssssssssssssssssss
        sssssssssssssssssss ssssssssssssssssssss
      </div>
      <div class="minmax-item">
        <p>test2222222222</p>
        <p>test 232232323233</p>
        <p>min-content采用短的内容长度</p>
      </div>
      <div class="minmax-item">
        <p>test</p>
        <p>test 232232323233222222</p>
        <p>max-content采用最长的内容长度</p>
      </div>
    </div>

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

效果

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

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

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

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

兼容性

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

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

新闻名称：css如何使用minmax()函数-创新互联
文章URL：https://www.cdcxhl.com/article42/dhpdec.html

成都网站建设公司_创新互联，为您提供网站建设、响应式网站、网站设计、小程序开发、动态网站、网站维护

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联