flex-basis 示例：内容

我注意到在弹性盒规格 https://www.w3.org/TR/2016/CR-css-flexbox-1-20160301/ that flex-basis可以设置为content.

我正在尝试在 html 中使用它。但它在 Chrome 中不起作用。

有人能给我举个例子吗flex-basis: content?

谢谢。

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

这是一个截图自MDN https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Browser_compatibility:

关于什么的解释content确实，MDN 也很有帮助：

content

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

注意：请注意，该值在初始版本中不存在 灵活的盒子布局，因此一些旧的实现不会 支持它。使用以下方法可以达到相同的效果auto一起 主要尺寸（宽度或高度）为auto.

注：简史

• 起初，flex-basis: auto意思是“看看我的宽度或高度 财产”。
• Then, flex-basis: auto更改为自动调整大小， “main-size”被引入为“看看我的宽度或高度 属性”关键字。
• 然后，该更改被恢复，所以auto再次表示“看 在我的宽度或高度属性”；和一个新的content关键词是 引入触发自动调整大小。

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