justify-content&的默认值是多少？对齐内容？ [英] What are the default values for justify-content & align content?

问题描述

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

This link (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) says the default for values justify-content & align-content is flex-start and stretch retrospectively.

MDN（ https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content & https://developer.mozilla.org/en-US/docs/Web/CSS/align-content ）表示默认值这些属性是普通。

MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content & https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) says the default values for these properties are normal.

哪个是正确的？/我要怎么解释？

Which one's correct?/How am I meant to interpret this?

推荐答案

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

您需要考虑相应的规范，然后才能请注意，因为有两个规范对此进行了定义。

You need to consider the specification to find this and you need to pay attention because there is two specifications defining this.

与flexbox相关的第一个（您必须遵循的那个）的初始值为 flex-start 表示调整内容和拉伸表示 align-items 。这是Flexbox 1级规范，得到了广泛的支持。

The first one related to flexbox (the one you have to follow) gives the initial value as flex-start for justify-content and stretch for align-items. This is the Flexbox Level 1 specification and it's widely supported.

第二个与使用未来对齐技术。该规范仍处于草稿模式，将定义在不同上下文（Flexbox / Grid / Block / multicol / .. container）中对齐项目的新方法。这两个属性的默认值为 normal （ justify-content 和 align-items ）

The second one is related to future alignment techniques. This specification is still in Draft mode and will define new way to align items in different contexts (Flexbox/Grid/Block/multicol/.. containers). The default value is normal for both properties (justify-content and align-items)

如果继续阅读，您会发现正常将退回到<$ c $ flex上下文中的$ c> stretch 和 justify-content stretch 表现为 flex-start

If you continue the reading you can see that normal will fallback to stretch in the flexbox context and for justify-content stretch behave as flex-start

因此，在所有情况下，都可以安全地假定初始值为合理化内容> flex-start ，因为正常将回退到它（对于对齐项，在此处可以将 stretch 作为默认选项）

So in all the cases, it's safe to assume that the initial value is flex-start for justify-content since normal will fallback to it (same for align-items where you can consider stretch as default)

换句话说， normal 是一个特殊的关键字（例如 auto ），它将基于不同的行为在上下文中。所以我们不能真正定义 normal 的作用。我们只能在特定的环境（Flexbox / Grid / Block / multicol / ..容器）中针对每个属性执行此操作。

In other words, normal is a special keyword (like auto for example) that will have a different behavior based on the context. So we cannot really define what normal will do. We can only do it in a particular context (Flexbox/Grid/Block/multicol/.. containers) and for each property.

您还可以使用 normal 没有任何问题，因为它将发生以下情况：

You can also use normal without any issue because it will either:

1. 被视为无效值（不执行新规范），浏览器将使用初始一个（ flex-start 或 stretch （在Flexbox规范中定义）


2. ，或被视为有效值（新规范已实施，甚至是部分实施），并且也会退回到以前的值。

1. be considered an invalid value (no implementing of the new Specification) and the browser will use the initial one (flex-start or stretch defined in the Flexbox Specification)
2. or be considered as valid value (the new Specification is implemented, even partially) and will also fallback to previous values.

示例，在所有情况下，无论使用哪种浏览器，都将得到相同的结果：

Example where you will get the same result for all the cases whataver the browser:

.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/zh-CN/docs/Web/CSS/justify -content＃Specifications 。跟随他们获取更准确的详细信息（可能有点无聊，但要耐心..）

The MDN is a bit confusing because it groups both specification making it hard to understand but you can clearly see that it links to both specifications at the end: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#Specifications. Follow them to get more accurate details (it can be a bit boring but be patient ..)

相关问题，以了解MDN如何误导您：

Related questions to see how the MDN can be missleading:

对齐项目如何在显示中起作用：块元素

响应式表格布局中的Flexbox：列未拉伸到全高

将`baseline`值与`justify-content`结合使用是否有意义，在CSS Flex / Grid中是 justify-items还是 justify-self？

证明内容的默认值是什么？

这篇关于justify-content&amp;的默认值是多少？对齐内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！