flex-basis 的例子：内容

Question

我在flexbox 规范中注意到flex-basis可以设置为content 。

我正在尝试在 html 中使用它。 但它不适用于 chrome。

有人可以给我看一个flex-basis: content的例子吗？

谢谢你。

Answer 1

请注意，大多数主要浏览器尚不支持content值。

这是MDN的截图：

有关content作用的解释，MDN 也很有帮助：

content

表示根据弹性项目的内容自动调整大小。

注意：请注意，Flexible Box Layout 的初始版本中不存在此值，因此一些较旧的实现将不支持它。 可以通过将auto与主要大小（宽度或高度）的auto一起使用来获得等效效果。

注：简史

• 最初， flex-basis: auto意思是“看看我的宽度或高度属性”。
• 然后， flex-basis: auto被更改为表示自动调整大小，并且“main-size”被引入为“查看我的宽度或高度属性”关键字。
• 然后，该更改被还原，因此auto再次表示“查看我的宽度或高度属性”； 并且引入了一个新的content关键字来触发自动调整大小。

_{来源： https : //developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values}