-
Book Overview & Buying
-
Table Of Contents
Designing Next Generation Web Projects with CSS3
By :
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.
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> ...
Change the font size
Change margin width
Change background colour