HTML5: Your visual blueprint™ for designing rich web pages and applications

STRETCH AND SHRINK OBJECTS IN A FLEXIBLE BOX

You can control the size of child objects within a flexible box with the box-flex property. When this is set on a box-child object, the child will have a higher- or lower-size priority, when compared to the other children in the flexible box object:

box-flex: ratio;
-moz-box-flex: ratio;
-webkit-box-flex: ratio;

The ratio value can be any positive number, but it is pretty rare to require any value higher than 2. Effectively, 0 makes the box-child as small as possible, or not flexible, and the highest ratio number stretches the box-child to be as large as possible, or the most flexible. All ratios are relative, so any number between 1 and the highest number is treated as a partial stretch, proportionate ...