0

I am studying the CSS3 flexible model. I checked out MDN's page about it I think I got the general concept but I don't understand how the following properties work:

flex-basis: The CSS flex-basis property specifies the flex basis which is the initial main size of a flex item.

flex-grow: The CSS flex-grow property specifies the flex grow factor of a flex item.

flex-shrink: The CSS flex-shrink property specifies the flex shrink factor of a flex item.

I also tried to tinker with the sandboxes http://demo.agektmr.com/flexbox/ and http://the-echoplex.net/flexyboxes/ linked on MDN but I still wasn't enlightned.

Can you elaborate some explanation on those properties to help understand their meaning?

Andrea Casaccia
  • 4,802
  • 4
  • 29
  • 54
  • 2
    Have you tried looking at the specification? http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/. Also related: http://stackoverflow.com/questions/14224732/in-what-circumstances-flex-shrink-is-applied-to-the-flex-elements-and-how-it-wor – cimmanon Aug 13 '13 at 16:21

1 Answers1

1

As suggested by @cimmanon in the comments, the w3 specification explains it much better: http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#flex:

In short:

flex-basis specifies the initial main size of the flex item, before free space is distributed according to the flex factors.

flex-grow controls the distribution of positive free space (when the size of the container is bigger than the size required to display the flex items)

flex-shrink controls the distribution of negative space (when the container dimension is less than the size required to display the items)

Andrea Casaccia
  • 4,802
  • 4
  • 29
  • 54