MDN的默认值justify-content为normal,但未在接受值列表中列出。
有什么normal价值?
正常
将项目包装在其默认位置,就像未设置辩护内容值一样。此值在网格和flex容器中表现为拉伸。
我看到其他网站将其列为flex-start。默认值是多少?
通过查看规格,我可能已经回答了我自己的问题:
正常情况下将作为开始。
您应该注意,因为justify-content是在两个不同的规范中定义的,而技巧就在这里。
第一个规范是这样的:https ://drafts.csswg.org/css-align-3/#propdef-justify-content是草稿。本规范的目的是允许我们使用相同的属性来对齐所有种类的元素:
CSS级别1和2允许通过text-align对齐文本,并通过平衡自动边距来对齐块。但是,除了表格单元格以外,无法进行垂直对齐。随着CSS添加更多功能,在各个维度上对齐框的能力变得越来越重要。该模块尝试创建一个内聚的通用框对齐模型,以在所有CSS中共享。
在内部,您会发现它justify-content可以与所有元素一起使用,并且确实有一个名为的值normal。此值的行为取决于其应用的上下文。
对于flexbox和CSS网格,您将看到
normal表现为stretch。
对于flexbox,您还将看到
该
justify-content属性沿主轴应用,但是由于主轴上的拉伸由flex控制,因此stretch其行为为flex-start。
以上所有内容仍在草案中,尚无支持。要找到您的真实值,justify-content请参阅Flexbox或CSS网格规范。
在Flexbox中,这样的值不存在:
名称:证明内容
值:flex-start | 柔性端| 中心| 间隔| 周围空间
初始:flex-start
使用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
Run Code Online (Sandbox Code Playgroud)