HTML and CSS Reference
In-Depth Information
Flexbox good
Flexbox bad
Intended for toolbars,
menus, and so on rather
than full pages.
Weird things happen
when content has no
fixed intrinsic width.
Can manipulate layout
order with CSS.
Multiline grids that
exactly fill the
available space.
Using the CSS3 Grid Alignment module
The
CSS3
Grid Alignment module
completely separates the layout from
the elements in your markup. You
use
CSS
to define a grid and then
assign elements to the grid using a
row and column reference. Cur-
rently only
IE10
has any support for
this module, although the WebKit
support is under development. Fol-
lowing is some simple markup that
will be turned into the three-column
layout shown here:
Full
Partial
-
19.0*
-
-
-
10.0
-
-
-
3.1
*
Chrome needs a runtime flag to be set to
enable the experimental support; see
=60731
for details of progress.
<body>
<header>Header</header>
<aside class="b">Side bar</
aside>
<article>I never am really
satisfied... etc., etc.</
article>
<aside class="d">Side bar</
aside>
<footer>Footer</footer>
</body>
