這篇文章主要介紹了css如何使用minmax()函數(shù)，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站是一家專注于成都做網(wǎng)站、網(wǎng)站設計與策劃設計,通榆網(wǎng)站建設哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設10多年,網(wǎng)設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:通榆等地區(qū)。通榆做網(wǎng)站價格咨詢:18982081108

minmax()

minmax函數(shù)表示一個閉區(qū)間范圍[min,max]，當值小于等于min時，值等于min,當大于等于max時，值等于max.

min-content，max-content

minmax函數(shù)接收min-content,max-content參數(shù)，這兩個參數(shù)表示內(nèi)容短和最長的內(nèi)容長度?？聪旅姘咐?/p>

    <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采用短的內(nèi)容長度</p>
      </div>
      <div class="minmax-item">
        <p>test</p>
        <p>test 232232323233222222</p>
        <p>max-content采用最長的內(nèi)容長度</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);
      }

效果

可以看到，第二個項目的最小的內(nèi)容寬度為第二個項目中的第一個p標簽

當設置成minmax(50px,min-content)時，表示列寬較大的寬度也不能超過第一個p標簽的內(nèi)容寬度。

第三個項目的較大的內(nèi)容寬度為第三個p標簽的內(nèi)容寬度

當設置成minmax(100px,max-content)時，較大的內(nèi)容寬度不會超過第三個p標簽的寬度

兼容性

跟fit-content函數(shù)一樣，不支持ie,但對主流的現(xiàn)代瀏覽器支持還不錯。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“css如何使用minmax()函數(shù)”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設公司，，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!

新聞名稱：css如何使用minmax()函數(shù)-創(chuàng)新互聯(lián)
文章URL：http://chinadenli.net/article42/dhpdec.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設、響應式網(wǎng)站、網(wǎng)站設計、小程序開發(fā)、動態(tài)網(wǎng)站、網(wǎng)站維護

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)