CODEWITHSUNDEEP
htmlcssflexbox
Emma
Emma

Reputation: 941

Example of flex-basis: content

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.

Upvotes: 11

Views: 2434

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371729

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

Here's a screenshot from MDN:

enter image description here

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

Upvotes: 7

Related Questions