您应该注意,因为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 || ? [ | left | right ] = space-between | space-around | space-evenly | stretch = unsafe | safe = center | start | end | flex-start | flex-end