HTML and CSS Reference
In-Depth Information
THE FLEXIBILITY OF FLEXBOX
The last Flexbox feature you'll look at is the ability to make child elements and
their surrounding whitespace flexible. The property you need to do this is
flex
,
as shown here:
section {
: ;
: ;
}
article {
flex: 1 1 200px;
}
So what do the three arguments inside the function do?
The third value is the preferred size of the child elements. If specified, the size
value will be applied to all the children before the other arguments come into effect.
So if you set this as 200 pixels, each child element will have a width of 200 pixels
(or
height
, if
flex-flow
is set to
column
rather than
row
) .
The first value is the positive flex, a proportion that dictates what share of
remaining space available in the parent the children will have. So, for example,
if the parent element of the three
<article>
s was 750 pixels and each one had a
positive flex value of 1, as in the preceding code, the extra 150 pixels would be split
equally between the children; each one would end up as 250 pixels wide.
If one of the children had a positive flex of 2, it would receive twice as much of
the remaining space as the other two, so would end up as (150/4 x 2) + 200 = 275
pixels. The other two would be 150/4 + 200 = 237.5 pixels. The positive flex is the
only mandatory argument.
The second value is the negative flex and is also a proportion, except that it
works in the opposite direction to the positive flex value. This dictates what happens
when the children of the flexbox overflow their parent. In the preceding example,
if the parent element was 750 pixels wide and the children had a preferred size of
300 pixels for a total width of 900 pixels, they would overflow the parent by 150
pixels. A negative flex value of 1 given to all of them would cause each one to be
reduced by 50 pixels to stop them overflowing their parent; each would end up
as 250 pixels wide.
