Geek Answers Handbook

Flex basics example: content

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

I am trying to use this in html. But it does not work in chrome.

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

Thanks.

+6
source share
1 answer

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

Here is a screenshot from MDN :

enter image description here

To explain what content does, MDN is also useful:

content

Indicates automatic calibration based on the contents of flexible elements.

Note. Note that this value was not present in the initial release of Flexible Box Layout, and therefore some older versions will not support it. An equivalent effect can be obtained by using auto together with the basic size (width or height) of auto .

Note: A Brief History

  • Originally flex-basis: auto meant "look at my width or height property".
  • Then flex-basis: auto was changed to automatically determine the size, and the "main size" was presented as a "look at my width or height property".
  • Then this change was canceled, so auto again means “look at my width or height property”, and the new keyword is content to start automatic calibration.

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

+4
source

More articles:


All Articles