证明内容的默认值是多少?

证明内容的默认值是多少?

问题描述:

MDN的默认值为 justify-content 作为普通,但是未在接受的值列表中列出。

MDN has the default value of justify-content as normal but that's not listed in the list of accepted values.

什么是正常值


普通

项目以默认位置打包,就好像没有
调整内容值已设置。此值在网格
和flex容器中表现为拉伸。

normal
The items are packed in their default position as if no justify-content value was set. This value behaves as stretch in grid and flex containers.

我看到其他网站将其列为灵活启动。默认值是多少?

I've seen other sites list it as flex-start. What is the default value?

我可能通过查看规范


normal否则会作为开始。

normal otherwise behaves as start.


您应该注意,因为 justify-content 有两个不同的规范定义,技巧就在这里。

You should pay attention because justify-content is defined in two different specifications and the trick is here.

第一个规范是这样的: https://drafts.c​​sswg.org/css-align-3/#propdef-justify-content 是草案之一。本规范的目的是允许我们使用相同的属性来对齐所有类型的元素:

The first specifciation is this one: https://drafts.csswg.org/css-align-3/#propdef-justify-content which is a draft one. The purpose of this specification is to allow us to align all kind of elements using the same properties:


CSS级别1和2允许通过以下方式对齐文本通过平衡自动页边距来进行文本对齐和块对齐。但是,除了表格单元格以外,无法进行垂直对齐。随着CSS添加更多功能,在各个维度上对齐框的能力变得越来越重要。 此模块尝试创建一个内聚的通用框对齐模型,以在所有CSS中共享。

在内部,您会发现 justify-content 可以与所有元素一起使用,并且确实具有名为 normal 的值。此值的行为取决于应用它的上下文。

Inside you will find that justify-content can be used with all the elements and it has indeed a value called normal. The behavior of this value depend on the context where its applied.

对于flexbox和CSS网格,您将看到

For flexbox and CSS grid you will see


正常表现为拉伸

此外,对于flexbox,您将看到

Also for flexbox you will see


justify-content 属性沿主轴应用,但是由于主轴的拉伸由flex控制, stretch 的行为与 flex-start 相同。

The justify-content property applies along the main axis, but since stretching in the main axis is controlled by flex, stretch behaves as flex-start.




以上所有内容仍在草案中,尚无支持。要找到 justify-content real 值,您应该查看Flexbox或CSS网格规范。


All the above is still in Draft and has no support yet. To find the real values of justify-content you should either see the Flexbox or CSS grid specification.

Flexbox 中,这样的值不t存在:

In the Flexbox one such value doesn't exist:


名称:辩解内容

Name: justify-content

值:flex-start | flex-end |中心|间隔|空格

Value: flex-start | flex-end | center | space-between | space-around

初始:flex-start

Initial: flex-start

使用 normal 值将被视为无效,并且将使用初始值,或者将被视为有效,并且其值将回落为 flex-start 的初始值。

Using normal value will either be considered as invalid and the initial value will be used or will be considered as valid and it will fall back to flex-start, the intial value.

CSS网格中规范,它们已经链接到草案之一,因此您可以假定所有值都存在,但是您需要注意其中某些值的浏览器支持。

In the CSS grid specification they are already linking to the draft one so you can assume all the values exist but you need to pay attention to the browser support of some of them.

基本上,MDN页面会合并所有使其变得令人困惑的规范。

Basically the MDN page is combining all the specifications which make it a but confusing.

将来,合理化内容将具有以下值:

normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]

<content-distribution> = space-between | space-around | space-evenly | stretch

<overflow-position> = unsafe | safe

<content-position> = center | start | end | flex-start | flex-end