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/en-US/docs/Web/CSS/justify-content & https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) 说这些属性的默认值是 normal.

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 相关的(您必须遵循的一个)为 justify-content 和 stretch 为 align-itemsflex-start代码>.这是 Flexbox Level 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/.. 容器)中对齐项目的新方法.两个属性的默认值都是 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)

如果你继续阅读，你会看到 normal 将回退到 stretch 在 flexbox 上下文和 justify-content 拉伸表现为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

因此在所有情况下，可以安全地假设 justify-content 的初始值是 flex-start，因为 normal 将回退到它(对于 align-items 相同，您可以将 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. 被视为无效值(未实现新规范)，浏览器将使用 initial 一个(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/en-US/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:

justify-items 如何在 display:block 元素上工作

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

将 `baseline` 值与 `justify-content`、`justify-items` 或 `justify- 一起使用是否有意义?CSS Flex/Grid 中的 self`?

对齐内容的默认值是多少?

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