HTML and CSS Reference
In-Depth Information
FIGURE 7.12
In the current
layout, The Cast and Facts
containers have been given
an equal proportion of the
flexible space. I've included a
subtle background on the child
elements in this example so
you can more easily see what
is going on.
FIGURE 7.13
The Cast is now
taking up twice as much space
as the Facts.
This code produces the result shown in
Figure 7.12
. The three
<articles>
have
been given
flex: 1
, which gives them a positive flex ratio of 1 : 1 : 1, so they will
always take up an equal part of whatever space is available.
Now let's see what happens when you give the
#cast
container a
flex
value of
2
:
#cast {
: ;
}
Figure 7.13
shows the effect. The ratio is now 2 : 1 : 1, so the Cast is now given
twice as much of the flexible space as the others.
