I’ve read all about Flexbox over the past year or so but I’ve never actually made anything with it. Today I decided to have a bash at getting to grips with it.

The support is constantly improving and it’s only really IE 8/9 which don’t offers support. You need prefixes for some browsers too, check out all the facts here.

I’ve made a demo which you can view here.

There were some good features which immediately made me feel quite positive about Flexbox, those were

• The fact that you can leave the browser to determine equal space between elements.
• You can switch columns to the left or right with some simple CSS
• By default the flex box items all sit at the same height, meaning equal height cols.
• Alignment of the items, e.g. vertically centre aligned, is very simple

You can read a great write up about Flexbox on CSS tricks. As always I’ve found it much better to make things myself to get a full understanding.

Thanks for reading, any questions hit me up on

• CSS
• HTML
• Learning