两端对齐内容的默认值是多少?



MDN的默认值为normal,但未在接受值列表中列出。

什么是normal值?

正常
项目包装在其默认位置,好像没有 已设置对齐内容值。此值的行为类似于网格中的拉伸 和柔性容器。

我看到其他网站将其列为弹性启动。默认值是什么?

我可能通过查看规范来回答我自己的问题:

正常否则表现为开始。

您应该注意,因为justify-content是在两个不同的规范中定义的,诀窍就在这里。

第一个具体说明是这个:https://drafts.csswg.org/css-align-3/#propdef-justify-content 这是一个草案。此规范的目的是允许我们使用相同的属性对齐所有类型的元素:

CSS 级别 1 和 2 允许通过文本对齐对齐文本和通过平衡自动边距对齐块。但是,除了在表格单元格中,垂直对齐是不可能的。随着 CSS 添加更多功能,在各个维度上对齐框的能力变得更加重要。该模块尝试创建一个有凝聚力且通用的框对齐模型,以便在所有 CSS 之间共享。

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

对于弹性框和CSS网格,您将看到

normal的行为就像stretch.

同样对于弹性框,您会看到

justify-content属性沿主轴应用,但由于主轴中的拉伸由 flex 控制,因此stretch的行为flex-start


以上所有内容仍处于草稿中,尚不支持。要查找justify-content的实际值,您应该查看 Flexbox 或 CSS 网格规范。

在弹性框中,不存在这样的值:

名称:对齐内容

值:弹性开始 | 弹性结束 | 中心 | 间距之间 | 周围空间

初始:灵活启动

使用normal值将被视为无效并使用初始值,或者将被视为有效,它将回退到初始值flex-start

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

>基本上,MDN页面结合了所有规范,这使它变得令人困惑。

将来justify-content将具有以下值:

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

最新更新