基于弹性的示例：内容

Question

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

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

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

谢谢。

Answer 1

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

这是screenshot from MDN：

有关content的作用的说明，MDN也很有帮助：

  

<强> content

     

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

     

注意：请注意，此值在初始版本中不存在   灵活的盒子布局，因此一些较旧的实现不会   支持它。通过一起使用auto可以获得相同的效果   主要大小（宽度或高度）为auto。

     

注意：简史

     

  
• 最初，flex-basis: auto意味着＆＃34;看看我的宽度或高度   属性＆＃34 ;.
  
• 然后，flex-basis: auto更改为自动调整大小，   和＆＃34;主要尺寸＆＃34;被介绍为＆＃34;看我的宽度或高度   属性＆＃34;关键字。
  
• 然后，该更改被还原，因此auto再次表示＆＃34;看起来   在我的宽度或高度属性＆＃34 ;;并且正在使用新的content关键字   引入以触发自动调整大小。
  

     

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