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

minmax()

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

min-content，max-content

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

<divclass="minmax-wrapper">
<divclass="minmax-item">
test1dsssss3333333ssssssssssssssssssssssssssssssssss
sssssssssssssssssssssssssssssssssssssss
</div>
<divclass="minmax-item">
<p>test2222222222</p>
<p>test232232323233</p>
<p>min-content采用最短的內容長度</p>
</div>
<divclass="minmax-item">
<p>test</p>
<p>test232232323233222222</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()函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。