I've been meaning to write about flexbox for a while. I used it to produce most of the layout of this blog and the more projects I use it with the more I enjoy using it. It solves a whole range of problems that used to be very hard, hacky or impossible to fix.
I meant to produce a whole range of examples but the past two months have been taken up with changing jobs and travelling! For now take my word for it and a whole host of people on twitter
I would suggest having this css tricks guide to flexbox open. For about six months this was my most visited website and I know that many others have found it essential.
One quick example: When showing something off the best place is for it to be right in the middle of the view. This is a real pain without flexbox - with flexbox it means adding the following rules to the body (or container element).
display: flex;
align-items: center;
justify-content: center;
I use this for most of my experiments in codepen. See the embedded pen below for an example.
See the Pen Standard pen setup by Mike Harris (@mikemjharris) on CodePen.