使用min-content實現容器寬度自適應於內部元素

前言

設計師能夠分爲以下兩類：

• 先作好設計，而後將內容放入靜態框架中
• 優秀的設計師充分考慮內容的各個方面及其上下文，並建立適合於內容的設計

HTML原生就是響應式的（HTML內容在視口內流式的分佈）。隨着CSS的普遍應用，設計者建立了許多固定佈局的「盒子」並把內容強制的放在盒子之中，這有悖於HTML原生響應的特性。

過去幾年出現了一場革命，包括自適應設計，響應式設計，移動優先設計等。全部這些思想最根本部分就是優先考慮內容。CSS3也所以定義和實現一些新的屬性。其中就包括內在和外在的寬度（intrinsic and extrinsic width values）。

引入問題

咱們以一個常規的 WEB 頁面設計問題（figure 元素內的圖片）來引出問題並加以說明。

<figure>
    <img src="o4iaq1g8nr.jpg" />
    <figcaption>www.30ke.cn</figcaption>
    <p>三十客 - 一個專一於前端學習和分享的網站。</p>
</figure>

由於figure是塊級標記，因此元素一直延伸到至整個容器中。 在之內容優先的設計中，咱們一般但願容器 (本例中爲 figure元素) 儘量小。 到目前爲止，有幾種方法能夠實現。

figure {
    float: left;
}

經過設置浮動，能夠實現 figure 元素摺疊。可是若是 figure 中的 p （段落）元素寬於圖片寬度，則figure元素會收縮至最寬的子元素，而不是圖片的寬度。
使用display: inline-block 或 table-cell 一樣有上述問題。

figure {
    width: 500px;
}

將 figure 元素寫死一個寬度，但這使得元素固定並失去響應特性。

用 min-width 來幫忙

咱們最終就是要找到最優的圖片容器的寬度以最達到最好的適應內部圖片的目的。若是內部的文本換行顯示也不要緊。

咱們能夠經過 min-content 來達到目的。儘管該值 2006 年就出現了，但還處在實驗階段，所以須要添加不一樣瀏覽器前綴。

figure {
    border: 2px solid black;
    background: #cae9b8;
    margin: 0;
    width: -moz-min-content;
    width: -webkit-min-content;
    width: min-content;
}

上述代碼，很好的解決了上述問題。並且 margin 和 padding 在圖片容器內部仍然有效。

min-content 是內在和外在的寬高系列值中的一個，其它還包括 max-content ， fit-content等。這些值和 flexbox ，grid 和其它佈局系統，使得WEB設計更優秀更靈活。
min-content 的支持性很好，全部現代主流瀏覽器都支持該值，可是 Internet Explorer and Opera Mini 並不支持。

所以咱們藉助 max-widht 實現了回退的方案。

figure {
    max-width: 500px;
    max-width: min-content;
}

完整的帶回退的顯示方案見以下演示程序：

在線演示程序

原文地址

本文主要彙編自 Dudley Storey 的一篇博客，並加入了針對Internet Explorer and Opera Mini 的回退方案。可是由於本人水平有限，文中不免存在描述不清，代碼不完善等問題，還請你們多多予以批評指正！

參考文獻

CSS Intrinsic & Extrinsic Sizing Module Level 3
Design From the Inside Out With CSS Min-Content
play.csssecrets.io/