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