css min-width_CSS Min-Content从内而外的设计

css min-width

Every designer falls into one of two broad categories:

每个设计师都属于以下两大类之一：

• Designers that create the design first, then try to fit content inside a static frame.

  首先创建设计的设计师 ，然后尝试将内容放入静态框架中。

• Good designers who consider all aspects of the content, together with the contexts in which it will be used, and create a design that fits the content.

  优秀的设计师会考虑内容的各个方面以及将在其中使用的上下文，并创建适合该内容的设计 。

HTML is natively responsive: content flows inside the viewport. Until very recently, CSS, as it was popularly used, was pitted against this natural feature, with designers creating fixed layout “boxes” into which they tried to force content.

HTML具有本地响应能力：内容在视口内部流动。 直到最近， CSS才被广泛使用， 反对这种自然功能，设计师创建了固定布局的“盒子”，他们试图在其中插入内容。

The last three years has seen a soft revolution that has many names – adaptive design, responsive design, mobile-first design. At their best, all consider content first. CSS has enabled this revolution through many different properties and values, an important (although relatively unknown) aspect of which is intrinsic and extrinsic width values.

在过去的三年中，出现了一场软革命，其中有很多名字-自适应设计， 响应式设计 ，移动优先设计。 最好，所有人都首先考虑内容 。 CSS通过许多不同的属性和值实现了这一革命，其中一个重要的方面(尽管相对未知)是内在和外在的宽度值 。

Let’s take a look at a common web page design issue that is directly addressed by this new value system: an image inside an HTML figure element.

让我们看一下这个新的价值体系直接解决的常见网页设计问题：HTML figure元素中的图像。

<figure>
	<img src="holly.jpg" alt>
	<figcaption>Holly</figcaption>
	<p>A photo taken by Thomas Hawk on April 18, 2010 using a 
		Canon EOS 5D Mark II
</figure>

The CSS:

CSS：

figure {
	background: #aebc23;
}

Because

figure is a block tag, it stretches all the way across its container. When designing content-first, we often want the container – the <figure> element, in this case - to be as small as possible. Until now, there were a few ways of doing so:

figure是一个block标记，所以它一直延伸到整个容器。 在设计内容优先时，我们经常希望容器(在这种情况下， <figure>元素)要尽可能小。 到目前为止，有几种方法可以这样做：

figure {
	float: left;
}

Collapses the figure, but if the paragraph is wider than the image, the figure element will collapse to the widest piece of content, not the width of the photograph. Using display: inline-block or display: table-cell will produce the same result.

折叠图形，但是如果段落比图像宽，则figure元素将折叠到最宽的内容 ，而不是照片的宽度。 使用display: inline-block或display: table-cell将产生相同的结果。

figure {
	width: 500px;
}

Sets the <figure< to the correct width, but makes it fixed and non-responsive. If the image changes in any way, the container will no longer relate to it correctly.

将<figure<设置为正确的宽度，但使其固定且无响应。 如果图像发生任何变化，则容器将不再与之正确关联。

CSS最小内容救援 (CSS min-content To The Rescue)

What we want, ultimately, is a way of saying, “reduce the width of the container automatically so that the image fits inside it perfectly. If text content needs to wrap inside the container to make that happen, that’s okay”.

最终，我们要说的是一种方式，“自动减小容器的宽度，以使图像完美地适合其内部。 如果文本内容需要包装在容器中才能实现，那就可以了。

We can achieve that with the min-content value. Despite being around since mid-2006, the value is still considered experimental, and requires a vendor prefix. (You’ve probably used prefixes in front of properties, but they can equally be applied to values).

我们可以使用min-content值实现这一目标。 尽管该值自2006年中开始出现，但仍被认为是实验性值，并且需要供应商前缀 。 (您可能已经在属性前面使用了前缀，但是它们同样可以应用于值)。

The CSS for the figure is now:

该图CSS现在是：

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

The figure immediately collapses around the widest piece of content that cannot be broken with spaces. Margins and padding still work inside the container, so we’ll use the former to add space around the paragraph and <figcaption>:

该图立即在无法用空格破坏的最宽的内容周围折叠。 边距和填充仍然可以在容器内工作，因此我们将使用前者在段落和<figcaption>周围添加空间：

figcaption, p {
	text-align: center;
	margin: 1rem;
}
figcaption {
	font-weight: bolder;
	font-size: 1.2rem;
}

min-content is one of a suite of possible values for intrinsic and extrinsic width and height values, which, together with flexbox, grid and other layout systems, allow for greater flexibility in web page designs. Support is excellent: all modern browsers support min-content, with the significant exception of lack of Internet Explorer and Opera Mini.

min-content是内在和外在宽度和高度值的一组可能值之一，与flexbox ，grid和其他布局系统一起使用，可以在网页设计中提供更大的灵活性。 出色的支持：所有现代浏览器都支持min-content ，但缺少Internet Explorer和Opera Mini的情况非常明显。

翻译自: https://thenewcode.com/662/Design-From-the-Inside-Out-With-CSS-Min-Content

css min-width