使用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元素) 尽可能小。 到目前为止,有几种方法可以实现。

figure {
	float: left;
}
figure默认显示效果

通过设置浮动,可以实现 figure 元素折叠。但是如果 figure 中的 p (段落)元素宽于图片宽度,则figure元素会收缩至最宽的子元素,而不是图片的宽度。

使用display: inline-blocktable-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;
}

上述代码,很好的解决了上述问题。而且 marginpadding 在图片容器内部仍然有效。

min-content 是内在和外在的宽高系列值中的一个,其它还包括 max-contentfit-content等。这些值和 flexboxgrid 和其它布局系统,使得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/

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

【转载】XHTML 结构化之二:案例分析:W3school 的结构化标记

无论如何,不要跳过本节。阅读本章将增进你的技能,为你的网页减肥,并且使你对标记与设计之间的差异有更清晰的认识。本章中的理念是易于学习的,但是却能极大的提高网站的...

36416
来自专栏HTML5学堂

技术新手,从何下手HTML5?

HTML与CSS的学习顺序 你曾经有没有这样的感受呢?虽然HTML5学堂中关于HTML与CSS的文章不少的,但是却不知从何下手? 这样的日子,将从今天一去不复返...

4006
来自专栏进击的君君的前端之路

React学习笔记—React组件

1144
来自专栏芋道源码1024

Github改版,宣布放弃jQuery || 你的青春里,是否有过 JQuery 的身影?

2018年7月25日,Mislav Marohnić在推文中宣布GitHub前端已经彻底删除jQuery依赖,并全部依赖原生API。

1580
来自专栏向治洪

vue.js与其他前端框架的对比

React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供了响应式 (Reactive) 和组件化 (Composabl...

2648
来自专栏阮一峰的网络日志

CSS 框架 Bulma 教程

网页样式需要大量时间开发,最省事的方法就是使用 CSS 框架。 Bootstrap 是最著名的 CSS 框架,但是今天我想推荐另一个更轻量化、更易用的框架---...

3054
来自专栏前端知识铺

将你的 Virtual dom 渲染成 Canvas

一个基于Vue的virtual dom插件库,按照Vue render 函数的写法,直接将Vue生成的Vnode渲染到canvas中。支持常规的滚动操作和一些基...

2344
来自专栏前端杂货铺

reflow和repaint(摘录自张鑫旭的翻译)

//正文开始 关于回流(reflows)与重绘(repaints),我已经在twitter和delicious上发布,但是并没有在演讲中提到或是以文章形式发布。...

3404
来自专栏IMWeb前端团队

polymer组件化与vm特性

一、Polymer Polymer是Google在2013年的Google I/O大会上提出了一个新的UI框架。Polymer的实现使用了WebComponen...

2598
来自专栏向治洪

Vuejs和其他前端框架的对比

React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供了响应式 (Reactive) 和组件化 (Composabl...

43210

扫码关注云+社区

领取腾讯云代金券