CSS 的 min-content 與 max-content 屬性

min-content 與 max-content 也是新的 CSS 屬性，來用範例說明一下。

min-content：

這邊我們設置一個 div 並把 display 改成 inline-block，這樣裡面如果有元素的話區塊寬度會跟元素差不多寬。

<div class="img-wrap">
<img src="https://i.imgur.com/7PfhoY4.jpg" alt="">
</div>

.img-wrap{
  border: 1px solid #ccc;
  display: inline-block;
}

可是當我們加入文字時，區塊就會被撐到跟文字一樣寬，最大就跟母容器一樣。

而 min-content 就是可以讓區塊變得跟區塊內最短的元素一樣寬的語法：

.img-wrap{
  border: 1px solid #ccc;
  display: inline-block;
  width:min-content;
}

設定完會就變這樣：

max-content：

相對於 min-content，max-content 則是讓區塊被撐大，所以可能會像這樣爆版，文字都不會換行了。

可以給大家在排版的時候參考一下。