基于flex的示例：内容 [英] Example of flex-basis: content

问题描述

我在

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

基于flex项目的内容，指示自动调整大小。 注意：这个值在
Flexible Box Layout的初始版本中是不存在的，因此一些旧版本的实现不会支持
。通过使用 auto 加在一起
，主要尺寸（宽度或高度） auto
$ b

注意：简史

• 原来， flex-basis：auto 意思是看看我的宽度或高度
  属性。然后， flex-basis：auto 被更改为自动调整大小，
  和main-size为引入为查看我的宽度或高度
  属性关键字。


• 然后，该更改已被还原，因此 auto 再次意味着在我的宽度或高度属性看
  ;并引入新的 content 关键字作为触发自动调整大小的
  。

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

I noticed in the flexbox specification that flex-basis can be set to content.

I'm trying to use that in the html. But it's not working in chrome.

Can someone show me an example for flex-basis: content?

Thank you.

解决方案

Note that the content value is not yet supported by most major browsers.

Here's a screenshot from MDN:

For an explanation about what content does, MDN is also helpful:

content

Indicates automatic sizing, based on the flex item’s content.

Note: Note that this value was not present in the initial release of Flexible Box Layout, and thus some older implementations will not support it. The equivalent effect can be had by using auto together with a main size (width or height) of auto.

Note: Brief history

• Originally, flex-basis: auto meant "look at my width or height property".
• 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.
• Then, that change was reverted, so auto once again means "look at my width or height property"; and a new content keyword is being introduced to trigger automatic sizing.

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

这篇关于基于flex的示例：内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！