html - 证明内容的默认值是多少？

Question

MDN 的默认值为 justify-content作为 normal 但未在可接受值列表中列出。

什么是正常值？

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.

我看到其他网站将其列为 flex-start .默认值是多少？

我可能已经通过查看 spec 回答了我自己的问题:

normal otherwise behaves as start.

Answer 1

你应该注意，因为 justify-content 是在两个不同的规范中定义的，技巧就在这里。

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

CSS Levels 1 and 2 allowed for the alignment of text via text-align and the alignment of blocks by balancing auto margins. However, except in table cells, vertical alignment was not possible. As CSS adds further capabilities, the ability to align boxes in various dimensions becomes more critical. This module attempts to create a cohesive and common box alignment model to share among all of CSS.

在里面你会发现justify-content可以和所有的元素一起使用，它确实有一个叫做normal的值。此值的行为取决于其应用的上下文。

对于 flexbox 和 CSS grid 你会看到

normal behaves as stretch.

同样对于 flexbox 你会看到

The justify-content property applies along the main axis, but since stretching in the main axis is controlled by flex, stretch behaves as flex-start.

---

以上所有内容仍处于草案阶段，尚无支持。要找到 justify-content 的真实值，您应该查看 Flexbox 或 CSS 网格规范。

在Flexbox one这样的值不存在:

Name: justify-content

Value: flex-start | flex-end | center | space-between | space-around

Initial: flex-start

使用 normal 值将被视为无效并使用初始值，或者将被视为有效并返回到 flex-start，初始值。

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

---

基本上，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