Mastering CSS Layout with Flexbox

CSS sucks at layout.

The other day while putting the finishing touches on a website for a client I found myself staring at a set of social media buttons that I wanted to place in the center of a sidebar. I had gone through my usual set of CSS incantations but there it was in IE8, the Twitter button from hell, hanging out slightly to the left and mocking me with uneven vertical spacing.

Nemesis.

I tried to move it with pure mind power which at this point was boiling over with web-developer-rage that's been building and building over years of working with browsers. Sadly, I've been doing this for ten years and I still can't manage to move elements around on the page with my mind. If only there were an easier way...

I knew when I started to write this book layout was going to be the biggest hurdle. Nothing will send you scurrying back to Photoshop faster than a horizontal scrollbar. So the first chapter I wrote, and the chapter I'm giving to you for free today, is all about using flexbox to take the pain out of layout.

Flexbox is a CSS module designed for layout that makes floats, clearing divs and auto margins look like muzzle loading muskets compared to a Navy Seal sniper rifle. By the time you're done reading this chapter, and with a little practice, you'll be as close as one could be to moving things around on the page with a thought.

Here is the chapter: http://www.sketchingwithcss.com/samplechapter/

With this chapter I've included over 30 minutes of screencasts, a flexbox cheat sheet and nine different examples including the 37signals home page, Twitter and the CSS-Tricks forum. The code is included for each example.

I put many, many hours into this chapter because I know layout is hard. But I'm not done yet, the book will also have a section on using grid layout tools.

If you find this sample chapter useful, please share it with your friends and colleagues. Thank you.

Sketching with CSS will teach you how to design in the browser.

Sketching with CSS

Blow away your clients with your fast turnaround time. Bend CSS layouts to your will. Show your clients comps they can actually click on.

Get a free chapter and an 8 day email course on rapid prototyping in the browser.

Share this article with your friends:

Hey there, I'm Sean.

I'm probably a lot like you. I make stuff for the web. I have a CS degree, but the last 8 years of my career have been a more potent teacher.

Sean Fioritto

Recently, I wrote a book on web development called Sketching with CSS. I also run a training company for developers. I'm an author in Smashing Magazine and I've written some cool open source projects.

Today, I'm an entrepreneur. In the not so distant past I did the usual 9-5 thing doing web development for a couple of big companies.

I'd love to meet you on Twitter.

You can also email me: [email protected]