使用min-content实现容器宽度自适应于内部元素

Posted 2020-12-29 ifat3

前言

设计师可以分为如下两类：

• 先做好设计，然后将内容放入静态框架中
• 优秀的设计师充分考虑内容的各个方面及其上下文，并创建适合于内容的设计

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/