Follow order of HTML markup.
Rectangular containers.
Cannot center content vertically.
No widow, orphan controls.
No ligatures.
(Latest of Chrome, Safari, Internet Explorer, Firefox)
Center content vertically.
Organize content outside of source order (somewhat).
Widow, orphan controls.
Ligatures.
Actual layout of content irrespective of order in HTML.
Clip containers into any shape.
Text wrapping without rectangles.
.flex-container { display: flex; justify-content: center; align-items: center; }
More examples: codepen.io/tag/flexbox
.multicol h1 { widows: 4; }
flow-into
flow-from
region-break-after
region-break-before
region-break-inside
Fold content inline: css-tricks.com/examples/AdRegions/
Content irrespective of order in markup.
Full control over templates for all your break points.
More examples: codepen.io/collection/jabto
Demo • progress toolbar • html5rocks.com/en/tutorials/masking/adobe/
Load a font, take action when fonts are loaded
Use a spacebar or arrow keys to navigate