最小含量和最大含量如何工作? [英] How do min-content and max-content work?

问题描述

在CSS中如何计算min-content和max-content值?

How are the min-content and max-content values calculated in CSS?

内在维数是什么意思?

推荐答案

注意:本文中的宽度"是指逻辑宽度"，而不是CSS的width；也就是说，如果语言方向是垂直的(例如东亚语言)或在flexbox或grid中，则这些值也对CSS的height有效. min-content和max-content是width，height，min-width，min-height，max-width，max-height以及更多属性(例如flex-basis)的有效值.

Note: "width" in this text refers to the "logical width", not CSS's width; that is, the values are also valid for CSS's height, if the language direction is vertical (like east-asian languages) or in flexbox or grid. min-content and max-content are valid values for width, height, min-width, min-height, max-width, max-height and even more properties (like flex-basis).

CSS大小调整级别3引入了内在尺寸的概念-与外在相对.框的外在尺寸是在框的父框上计算的.例如，width: 80%被说成是外部维度，因为对象的width取决于其容纳箱的width.

CSS sizing level 3 introduced the concept of intrinsic dimensions - the opposite of extrinsic. An extrinsic dimension of a box is calculated on the box's parent box. For example width: 80% is said an extrinsic dimension as the width of the subject depends on the width of its containing box.

与此相反，width: min-content之所以称为 intrinsic ，是因为盒子的宽度是根据盒子本身包含的内容的尺寸来计算的.

Contrarily to that, width: min-content is said intrinsic as the width of the box is calculated on the dimension of the contents that the box itself contains.

内在尺寸是盒子本身的属性，仅当将盒子放置在文档中且上下文允许计算这些值时，外部尺寸才可用.例如，您可能知道，在CSS流(经典CSS布局模式)中，height: 20%仅在父元素中定义了height时才有效(即，它是可继承的).这是外部维度无法计算的情况(当外部数值不可用时，CSS会退回到其内在等效值).取而代之的是height: min-content总是可计算的，因为它对于框本身是固有的，并且无论框在文档中的位置(或框是否不存在)，它始终是相同的.

Intrinsic dimensions are properties of the box itself, extrinsic dimensions are only available if the box is placed in the document and in a context that permits these values to be calculated. For example, in CSS-flow (the classic CSS layout mode), as you probably know, height: 20% has only effect if height is defined in the parent element (i.e. it's inheritable); that is a case of an extrinsic dimension that is not calculable (when an extrinsic value is not available, CSS fallbacks to its intrinsic equivalent). Instead height: min-content is always calculable, as it is intrinsic to the box itself, and it is always the same regardless of the box's placement (or the box's absence) in the document.

min-content和max-content的定义多年来已发生了许多次更改，但结果始终保持不变，并且非常容易掌握.它们最初是由社区作为width的关键字请求的，当盒子float ing时，其计算值将与盒子的宽度匹配.确实，这两个属性的定义最初是基于float的行为.现在，它们的一般定义如下:

The definition of min-content and max-content has changed many times over the years but the result always stayed the same, and it is pretty straightforward to grasp. They were originally requested by the community as keywords for width, whose computed value would match the widths of a box when the box is floating. And indeed, the definition of these two properties was originally based on the behavior of float; now they are more generically defined as follows:

https://www.w3.org/TR/css -sizing-3/#min-content

一个盒子可以取的最小尺寸不会导致溢出，可以通过选择一个更大的尺寸来避免.

The smallest size a box could take that doesn’t lead to overflow that could be avoided by choosing a larger size.

换句话说，盒子内容不会溢出盒子本身的盒子的最小宽度.

一种可视化此方法的好方法实际上是使用float.

A good way to visualize this is using, in fact, float.

/* the computed width of #red in this example 
   equals to specifying #red { width: min-content } */
#blue        { width: 0px; }
#blue > #red { float: left; }

(GIF来源: http://jsfiddle.net/6srop4zu/)

在上述GIF中，红色框的最小内容宽度等于蓝色框的宽度为0px时的红色框的宽度(GIF中的234px在jsfiddle中有所不同).

In the above GIF, the red box's min-content width equals the red box's width at the time the blue box's width is 0px (234px in the GIF, might be different in the jsfiddle).

如您所见，如果将红色框缩小，则supercalifragilisticexpialidocious字会溢出红色框，因此在这种情况下，min-content等于该特定字的宽度，因为它占用了水平最大的空间.

As you can see, if the red box was made smaller, the word supercalifragilisticexpialidocious would overflow the red box, hence in this case the min-content equals the width of that particular word, as it is the one that takes the most space horizontally.

https://www.w3.org/TR/css -sizing-3/#max-content

在给定无限可用空间的情况下，框在给定轴上的理想"尺寸.通常，这是盒子可以沿该轴放置的最小尺寸，同时仍可围绕其内容物放置，即，最大程度地减少未填充的空间，同时避免溢出.

A box’s "ideal" size in a given axis when given infinite available space. Usually this is the smallest size the box could take in that axis while still fitting around its contents, i.e. minimizing unfilled space while avoiding overflow.

/* the computed width of #red in this example
   equals to specifying #red { width: max-content } */

#blue        { width: 99999999999999999px; } /* ~infinite */
#blue > #red { float: left; }

(GIF来源: http://jsfiddle.net/nktsrzvg/)

在上述GIF中，红色框的最大内容宽度等于红色框的宽度，当蓝色框的宽度无限大时(GIF中的386px，可能会有所不同在jsfiddle中).

In the above GIF, the red box's max-content width equals the red box's width when the blue box's width is infinite (386px in the GIF, might be different in the jsfiddle).

在这里，红色框充分利用了蓝色框中x轴上的可用空间，但又不浪费它.允许内容无限制地在相关轴上扩展，红色框将其包裹起来并扩展到最大扩展点.

Here, the red box fully takes advantage of the available space on the x axis in the blue box, but without wasting it. The contents are allowed to expand on the relevant axis without restrictions, and the red box wraps them and at the point of maximum expansion.

fit-content，stretch及其它呢?这些属性目前正在重新访问中，因此不稳定(日期:2018年7月).当他们变得更成熟时(希望很快)，将在此处添加它们.

What about fit-content, stretch and others? These properties are currently being revisited and as such they are not stable (date: July 2018). They will be added here when they get a bit more mature (hopefully soon).

这篇关于最小含量和最大含量如何工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！