min-content和max-content如何工作？

Question

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

内在维度意味着什么？

Answer 1

注意:本文中的"宽度"是指"逻辑宽度",而不是CSS width; 也就是说height,如果语言方向是垂直的(如东亚语言)或者在flexbox或网格中,这些值对CSS也有效.min-content和max-content是有效的值width,height,min-width,min-height,max-width,max-height和甚至更性质(像flex-basis).

盒子的内在尺寸是多少？

CSS规模等级3引入了内在维度的概念- 与外在维度相反.框的外部维度在框的父框中计算.例如,width: 80%被称为主体的外在维度width取决于width其包含的框.

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

内在维度是框本身的属性,外部维度仅在框放置在文档中并且在允许计算这些值的上下文中时才可用.例如,在CSS-flow(经典的CSS布局模式)中,正如您可能知道的那样,height: 20%只有height在父元素中定义(即它是可继承的)才有效; 这是一个不可计算的外在维度的情况(当外部价值不可用时,CSS回落到其内在的等价物).相反height: min-content,它总是可以计算的,因为它是盒子本身固有的,并且无论文件中盒子的位置(或盒子的缺失)如何,它总是相同的.

的定义min-content和max-content改变了很多次,多年来但结果始终保持不变,这是非常简单的把握.它们最初由社区请求作为关键字width,其计算值将与框中的框的宽度相匹配float.事实上,这两个属性的定义最初是基于行为float; 现在它们通常被定义如下:

min-content

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

盒子可以采用的最小尺寸不会导致溢出,可以通过选择更大的尺寸来避免.

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

事实上,一种可视化的好方法就是使用它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可能不同).

正如您所看到的,如果红色框变小,则该单词supercalifragilisticexpialidocious将溢出红色框,因此在这种情况下min-content等于该特定单词的宽度,因为它是水平占据最大空间的单词.

max-content

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

给定无限可用空间时,给定轴中的框"理想"大小.通常这是盒子在该轴上可以采用的最小尺寸,同时仍然适合其内容,即最小化未填充空间同时避免溢出.

/* 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中可能不同).

在这里,红色框充分利用了蓝色框中x轴上的可用空间,但没有浪费它.允许内容在相关轴上无限制地扩展,并且红色框包裹它们并且在最大扩展点处.

怎么样fit-content,stretch和其他人呢？目前正在重新审视这些财产,因此它们不稳定(日期:2018年7月).当它们变得更加成熟时(希望很快),它们将被添加到这里.

Answer 2

最小内容：

内容（一组词）可以具有的最小可能宽度。它表示内容中最大单词的宽度。

例子：

hi

this 

is

biggest-word-in-the-content

<------- min-content ------>

最大内容：

内容（一组词）可以具有的最大可能宽度。表示所有单词排成一行时内容的宽度。

例子：

hi this is a content without considering any line breaks.

<---------------------- max-content ------------------->