Today I spoke at Future of Web Design in New York on The Future of CSS Layout. For a decade we’ve been using floats for creating CSS layouts, and while they’re still the best choice for creating most multi-column designs, we’ve all been frustrated by their quirks and limitations. So in this presentation, I talked about some of the new and exciting CSS layout techniques that are either working right now, right around the corner, or a little ways down the road. I talked about how to use not only inline-block and table-cell display, but also how to use the Flexible Box Layout module in practical ways as a progressive enhancement technique for the layouts you’re crafting today.
You can view the slides on SlideShare, or download the slides here:
The Future of CSS Layout (PDF, 2 mb)
Flexbox Demos
I showed a few examples of how to use Flexible Box Layout and wanted to share my demo files with you so you could poke around in the code  if you like. Make sure to view these files in Chrome to see the correct layout. The second and third files have fallback CSS in place so that they still look fine in other browsers; it was not part of my presentation to do that with the first demo.
- Re-ordered feature boxes
- Single-line, full-width, vertically centered form
- Full-width, evenly distributed nav bar
Related resources
Here are several links to related resources, a few of which are in the slides plus many more that were not but which I recommend and think you’ll find useful.
(more…)
