简体繁体 English

flex-basis: auto 和 flex-basis: content 有什么区别？

[英]Whats is the difference between flex-basis: auto and flex-basis: content?

原文 2017-07-11 15:10:27 6 1 html/ css/ flexbox

I have been reading MDN article on flex-basis css property.我一直在阅读关于flex-basis css 属性的MDN 文章。 There I don't see any definition of flex-basis: auto .在那里我没有看到flex-basis: auto的任何定义。 It explains about flex-basis: content .它解释了flex-basis: content 。 Seems like content has now replaced auto .似乎content现在已经取代了auto 。 But if that's the case, then why is auto still the initial value?但如果是这样的话，那为什么auto还是初始值呢？

1 个解决方案

The MDN article seems to have been updated since this question was originally asked.自最初提出这个问题以来， MDN 文章似乎已经更新。 In short:简而言之：

auto means "look at my width or height property". auto表示“查看我的宽度或高度属性”。
content means "look at my content". content意思是“看我的内容”。

This does result in slight differences when the element has a fixed width or height .当元素具有固定的width或height时，这确实会导致轻微的差异。 You will notice this difference if you view this live demo ONLY in Firefox (The value content is ONLY supported in Firefox at the time of this writing).如果您仅在 Firefox 中查看此现场演示，您会注意到这种差异（在撰写本文时，只有 Firefox 支持价值content ）。

Also to quote historical notes from the same MDN article:还要引用同一篇 MDN 文章中的历史注释：

Originally, flex-basis:auto meant "look at my width or height property".最初，flex-basis:auto 的意思是“查看我的宽度或高度属性”。

Then, flex-basis:auto was changed to mean automatic sizing, and "main-size" was introduced as the "look at my width or height property" keyword.然后，flex-basis:auto 被更改为表示自动调整大小，并且引入了“main-size”作为“查看我的宽度或高度属性”关键字。 It was implemented in bug 1032922.它是在错误 1032922 中实现的。

Then, that change was reverted in bug 1093316, so auto once again means "look at my width or height property";然后，该更改在错误 1093316 中恢复，因此 auto 再次表示“查看我的宽度或高度属性”； and a new content keyword is being introduced to trigger automatic sizing.并且引入了一个新的内容关键字来触发自动调整大小。 (bug 1105111 covers adding that keyword). （错误 1105111 涉及添加该关键字）。