html - justify-content 和 align content 的默认值是什么？

Question

此链接 ( https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ) 表示 justify-content 和 align-content 的默认值是 flex-start 和 stretch 追溯。

MDN ( https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content & https://developer.mozilla.org/en-US/docs/Web/CSS/align-content ) 表示这些属性的默认值为 normal。

哪个是正确的？/我该如何解释？

Answer 1

^{更准确地说，默认值实际上称为初始值，这是正确的词。考虑到两者具有完全相同的含义，我将在我的回答中同时使用它们}

您需要考虑规范才能找到它，您需要注意，因为有两个规范定义了它。

first one related to flexbox (您必须遵循的那个)为 justify-content 提供初始值作为 flex-start 为 align-items 提供 stretch 。这是 Flexbox Level 1 规范，并得到广泛支持。

第二个相关to future alignment techniques .该规范仍处于草案模式，将定义在不同上下文(Flexbox/Grid/Block/multicol/.. 容器)中对齐元素的新方法。这两个属性(justify-content 和 align-items)的默认值为 normal

如果继续阅读，您会发现 normal 将回退到 flexbox 上下文中的 stretch 和 justify-content stretch 表现为 flex-start

因此在所有情况下，可以安全地假设 justify-content 的初始值为 flex-start，因为 normal 将回退到它(与 align-items 相同，您可以将 stretch 视为默认值)

换句话说，normal 是一个特殊的关键字(例如 auto)，它会根据上下文有不同的行为。所以我们无法真正定义 normal 会做什么。我们只能在特定上下文(Flexbox/Grid/Block/multicol/.. 容器)中针对每个属性执行此操作。

您也可以毫无问题地使用normal，因为它会:

1. 被认为是无效值(未实现新规范)，浏览器将使用初始值(flex-start 或stretch 在 Flexbox 规范中定义)
2. 或被视为有效值(新规范已实现，即使是部分实现)，也将回退到以前的值。

无论使用何种浏览器，您都将获得相同结果的示例:

.box {
  display:inline-flex;
  width:200px;
  height:200px;
  border:1px solid;
  justify-content:normal;
  align-items:normal;
}
.not-normal {
  justify-content:flex-start;
  align-items:stretch;
}
.initial {
  justify-content:initial;
  align-items:initial;
}
.box span {
  background:red;
  padding:10px;
}

<p>using normal</p>
<div class="box"><span> some text here</span></div>
<div class="box" style="flex-direction:column;"><span> some text here</span></div>
<p>using flex-start/stretch</p>
<div class="box not-normal"><span> some text here</span></div>
<div class="box not-normal" style="flex-direction:column;"><span> some text here</span></div>
<p>using initial</p>
<div class="box not-normal"><span> some text here</span></div>
<div class="box not-normal" style="flex-direction:column;"><span> some text here</span></div>

---

MDN 有点令人困惑，因为它将两个规范组合在一起，因此很难理解，但您可以清楚地看到它在末尾链接到两个规范:https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#Specifications .关注他们以获得更准确的细节(可能有点无聊，但请耐心等待..)

了解 MDN 如何误导的相关问题:

How does justify-items work on display:block elements

Flexbox in responsive table layout: Column not stretching to full height

Does it make any sense to use `baseline` value with `justify-content`, `justify-items` or `justify-self` in CSS Flex/Grid?

What is the default value of justify content?