What is the difference between positive and negative flexibility in css

Question

I was reading about the box-flex documentation for IE here and I noticed the use of 'positive' and 'negative' flexibility.

Can anyone explain what these terms mean and how they differ?

Thanks!

Answer 1

Positive Flexibility specifies proportion of extra space to distribute to each flex item’s dimension. In the new specification it is being called <‘flex-grow’>

Negative Flexibility specifies proportion of overflowing size to subtract from each flex item’s dimension. In the new specification it is being called <‘flex-shrink’>

For example, Lets say you have the following css: ( by the way, as per msdn, the -ms- vendor prefix is no longer needed as of IE11)

section{
 display:-ms-flexbox;
 -ms-flex-direction: row;}

article{
 -ms-flex: 1 1 200px;}

The third value of ms-flex is the preferred size of the child elements, when specified it will be applied before any arguments take effect. (<‘flex-basis’>)

The first value of ms-flex is the positive flexibility, so for example if the parent element of three articles is 750px and in our example all articles have a positive flex value of 1, the remaining 150px will be split equally among the three child articles :: each child would end up with a size (width in this example) of 250px. If, for some reason, one of the articles was changed to have a positive flex of 2, it would receive twice as much of the remaining space as the other two :: 275px size for one article, and 237.5px size for the other two.

The second value of ms-flex is the negative flexibility which works in the opposite direction of the positive flex to a certain extent ( except that it gets multiplied by the flex-basis before its used for making proportions ie the larger items will, normally shrink more than the smaller ones). So for example, if the parent element of three articles is 750px and each article was specified to have a preferred size of 300px instead of 200px, that would cause an overflow of 150px, so this is where negative flex of 1 comes to play and reduces each article size by 50px equally so that each article ends up with a size of 250px. Similarly if one of the article is specified to have a negative flex of 2 instead of 1, its size (width in this case) will be reduced twice as much as the remaining two article :: 225px for one article that has negative flex of 2 and 262.5 for the remaining two that have a negative flex of 1.

It is a bit of a complex explanation so I'm gonna try my best to sum it up, excuse me if I miss anything.

1. The preferred size is applied first
2. The positive flex value is applied if there is remaining space in the parent
3. The negative flex value is applied if there is an overflow above the parent size. The elements will shrink according to the ratio set and until they fit in.

This can be expanded on, but I hope it put you on the right track to understand what positive and negative flexibility mean.