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.
The W3C CSS3 specs I covered
- Flexible Box Layout
- Grid Template Layout (editor’s draft)
- Multi-column Layout
- Regions
- Exclusions and Shapes
Flexible Box Layout
- Browser support
- “Using CSS flexible boxes” by Mozilla Developer Network
- “Flexbox — fast track to layout nirvana?” by Chris Mills for Dev.Opera
- ““Old” Flexbox and “New” Flexbox” by Chris Coyier
- CSS Flexbox Please! syntax testing/visualizer tool by Eiji Kitamura
Other CSS3 layout techniques
- “Six CSS Layout Features To Look Forward To” by Divya Manian for Smashing Magazine
- IE 10 Regions demo
- IE 10 Exclusions demo
- IE 10 CSS3 Grid Layout demo
display:table/table-cell
- Browser support
- Hybrid fluid-fixed demo using display:table by Moople
- “Re-tabulate” by Jeremy Keith
- “Table Formatting” by SitePoint
- “Everything You Know About CSS Is Wrong” by Rachel Andrew for Digital Web Magazine
- “Give Floats the Flick in CSS Layouts” by Andrew Tetlaw for SitePoint
display:inline-block
- Browser support
- “CSS display: inline-Block: Why It Rocks, And Why It Sucks” by Robert Nyman
- “Fighting the Space Between Inline Block Elements” by Chris Coyier
- “inline-block vs float” by Niels Matthijs
- “Center Multiple DIVs with CSS” by Louis Lazaris
- “Cross-Browser Inline-Block” by Ryan Doherty for Mozilla Webdev
- “Give Floats the Flick in CSS Layouts” by Andrew Tetlaw for SitePoint
Thanks for this timely post! Flexbox looks phenomenal.
I wanted to research buying your book Stunning CSS3, but it seems your links on the book page are broken. I found it on Barnes and Noble, but still I think you could do with a more obvious call to action on that buy page. Just wanted to give you a heads up!
This is the kind of stuff that makes it all worth it