css如何使用minmax()函數(shù)

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

minmax()

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

min-content，max-content

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

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

效果

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

當(dāng)設(shè)置成minmax(50px,min-content)時(shí)，表示列寬最大的寬度也不能超過第一個(gè)p標(biāo)簽的內(nèi)容寬度。

第三個(gè)項(xiàng)目的最大的內(nèi)容寬度為第三個(gè)p標(biāo)簽的內(nèi)容寬度

當(dāng)設(shè)置成minmax(100px,max-content)時(shí)，最大的內(nèi)容寬度不會(huì)超過第三個(gè)p標(biāo)簽的寬度

兼容性

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“css如何使用minmax()函數(shù)”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!