CSS Flexbox Tips

Lately, I’ve been using CSS flexboxes quite a bit. They are a really powerful tool for aligning elements. However, understanding how they work took a bit of time for me but with experience, I think I’ve become quite adept at using them when performing layout related tasks.

So, without further ado, here are some tips:

1) Work with the latest specification

The flexbox specification is in flux and so there are old implementations floating around on the Internet. So, before starting to work with them you should understand what the latest spec outlines. Basically, the latest spec uses display: flex, anything else is old. For more info, have a look at this post: http://css-tricks.com/old-flexbox-and-new-flexbox/

2) Use containers

When designing your html layout, make sure to use containers. They are the key to using flexboxes properly. Some flex properties are meant for your container/parent element while others are meant for the child elements. For example, align-items and justify-content should be applied to the container while properties such as flex and align-self should be applied to the child elements. Here is a very simple example: http://jsfiddle.net/JQZ34/1

3) Browser support

Flexboxes are still very new and thus browser support can be an issue. They are very powerful but before you commit to using them make sure you understand your target audience. What browser versions are your users working with? If your product is meant for the wider web then maybe flexboxes are not the right fit for you. See the ‘Browser Compatibility” section for more details: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes#Browser_compatibility

4) Performance

Flexbox performance is improving as time passes and browser support increases but they can be slow so context matters. You must ask yourself whether the slight performance loss is worth it for your particular situation. If the answer is no, then other options such as CSS table layouts might be a better fit. Here are some links if you are interested in the performance aspect of flexboxes:

http://updates.html5rocks.com/2013/10/Flexbox-layout-isn-t-slow
http://benfrain.com/css-performance-test-flexbox-v-css-table-fight/
http://css-tricks.com/does-flexbox-have-a-performance-problem/

This entry was posted in Web Development and tagged , , . Bookmark the permalink.

Leave a Reply

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


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>