Why I used the Flexible Box Model in my blog redesign

May 5th, 2011

This week I redesigned my blog and I decided to used the CSS3 flexible box model to control the positioning of most of the elements. If you’ve taken a look at it, the flexible box model is a great addition to our web site building tools and makes positioning a lot easier. Any experienced web designer or developer knows that sometimes the biggest challenge of turning a design into an actual web page is positioning elements like columns horizontally and enabling the page to stretch based on content. This is one of the problems that the flexible box model solves.

You’ve probably heard of the clearfix hack. Honestly, it took me a while before I started using it, mainly because for the longest time I followed the advice that you shouldn’t use hacks in your CSS. But eventually, I saw how many developers that I looked up to were using and I will admit, it made things a lot easier. At the same time though, it is still a hack and it’s the kind of thing that the flexible box model make unnecessary. At least in the browsers that implement it that is and predictably, Internet Explorer isn’t one that supports it, not even IE9.

So, wait. If not version of IE doesn’t support it and it’s the most widely used browser, then why would I use the flexible box model? There’s two reasons. The first being, I looked at my analytics and saw the IE users amounted to a very small about of the visitors to my blog, and since Firefox, Chrome and Safari all support it, then I shouldn’t have that much to worry about. But what kind of web developer would I be, if I didn’t make my blog display properly in most browsers. I needed a way to know if the browser supports the flexible box model or not.

That’s where Modernizr came in. Like the clearfix hack, for a while I was a bit wary of relying on a JavaScript file to make my site work. But, the more I looked into it and the more I built sites that used more and more JS, I realized the chance of it not loading is pretty low. What Modernizr does is add class names to the html tag of a web page. In my blog’s case, if the browser has implemented Flexbox, the it will Modernizr will add a class of flexbox and, in my CSS file, it will run this (shown without the vendor pre-fixes):

1
2
3
4
5
6
.flexbox #wrapper {
  width:100%;
  display:box;
  box-orient:vertical;
  box-align:center;
}

If it doesn’t support Flexbox, then Modernizr adds a class of no-flexbox and this CSS will be used:

1
2
3
.no-flexbox #content {
  margin:auto;
}

I’ve become a big fan of Modernizr and I’m using it on more and more sites. If you’re planning on using it for just one or two CSS3 or HTML5 features, then you can now just download a custom build of Modernizr so it’s an even smaller file to load and run. Use Modernizr and you can start building websites using the modern features of HTML5 and CSS3 that you may have been putting off because you weren’t sure if it would work or not.

Leave a Reply

Your email address will not be published. Required fields are marked *