CSS2.1 defined four layout modes: block, inline, tabular, and positioned. CSS3 has added some new layout modes, and one of them is
Flexible Box Layout. This new mode is activated by a new value we can give to the display
statement, and can be configured through a whole new set of properties.
The basic idea behind this new layout mode is that within a container element (for example, our section
element) we can specify the direction we want our inner elements to be displayed in. So if we say horizontal
then the elements will flow from left to right, and if we say vertical
they'll be positioned one below the other, top to bottom.
Then we can decide the size of each of the elements either by using fixed dimensions or by defining a grow factor.
Note
When a new space is available within the container, the elements increase their width proportionally to their grow factors.
Enough talk! Let's create a small demo to test this out:
<!doctype html> <html> ...