CSS3 LAYOUT CHOPS - Practical CSS3: Develop and Design - page 263

If one of the children had a negative flex of 2, it would be reduced in width by
twice as much as the other two, so would end up as 300 - (150/4 x 2) = 225 pixels.
The other two would be 300 - 150/4 = 262.5 pixels. So in the case of negative flex,
a lower number means less of a reduction and therefore a wider element!
Note: If no explicit negative flex value is set, the default value comes into play,
which is 1.
This is complex, so let's go over the workflow here. If you specify all three
arguments, the workflow looks like this:

1. The preferred size is applied to all the flexbox children.

2. The remaining space is divided between the flexbox children according to

the positive flex value set.

3. If the combined width (or height) of the children causes them to overflow the

parent container, the negative flex values, if set, will shrink them down until
they fit in. The ratio of these will dictate how much each child is shrunk by.

Note that flex is actually a shorthand property. You can see the three values it
holds individually using flex-grow , flex-shrink , and flex-basis .
Time for an example! Look at the our-friends-flexbox-flexible.html file in the
chapter7 code download folder. This is the same as our-friends-flexbox.html but
with some experimental flex values applied to the <article> s. Be prepared to
follow along and change them if you want to experience the different effects.
Let's start by setting the following values on the child <articles>:

#cast {
: ;
}

#facts {
: ;
}

#plot {
: ;
}