证明内容的默认值是多少?
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.csswg.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 asflex-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