Please Support - Ride for the child

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 @webknit