Defining Layouts with the Flexible Box Model
One of the most difficult parts of using CSS for layouts is learning how to wrangle “floats and clears,” two CSS properties that make it possible to get those web layouts we’re all so used to seeing, without resorting to tables.
But really, we’re abusing floats and clears, and we need a better way. That’s the promise of the Flexible Box model,[87] and although it’s not quite ready, it will be soon. With this new model, designing complex layouts that work on all devices is much, much easier.
Let’s use the Flexible Box model to make the standard “sidebar on the left, content on the right” layout we’ve seen thousands of times. We’ll start with basic markup in an HTML page:
| where_next/flexbox/index.html ... |
Get HTML5 and CSS3, 2nd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
