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

minmax()

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

min-content，max-content

minmax函數(shù)接收min-content,max-content參數(shù)，這兩個參數(shù)表示內(nèi)容最短和最長的內(nèi)容長度。看下面案例。

<divclass="minmax-wrapper">
<divclass="minmax-item">
test1dsssss3333333ssssssssssssssssssssssssssssssssss
sssssssssssssssssssssssssssssssssssssss
</div>
<divclass="minmax-item">
<p>test2222222222</p>
<p>test232232323233</p>
<p>min-content采用最短的內(nèi)容長度</p>
</div>
<divclass="minmax-item">
<p>test</p>
<p>test232232323233222222</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標(biāo)簽

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

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

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

兼容性

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

總結(jié)

以上是生活随笔為你收集整理的css如何使用minmax()函数的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。