For a while now flexbox has been a great way of positioning content, but wasn’t widely supported. However, more and more recently the main browsers support it. I’ve been using it while, and here is a quick guide into using the core basics, I’ve gone into the usage below with a Codepen to demonstrate it all.

Order by flex

Sometimes you want the order of content to not match the HTML, you might want to have a different order of the content on mobile, use this…

order: *value*

Horizonal align

By using flex you can easily and consistently align the content horizontally. This allows you to make full width navigations no matter what the size of the content is. Just use…

justify-content: space-around;

Centre align

It used to be possible to align content in the centre of its parent by position the element to a top of 50% and then transformY to -50% to put it in the middle, but, with flex you can just have one line of CSS to achieve it, just use…

justify-content: center;

Centre align multiple objects

By use the base flexbox rules you can centre align the content, if you have a few objects that make up a full row (unlike centre align above) you can just the basic on the parent container…

display: flex;

Expanding content

You might also want to start off with equally spaced columns of content, by using flex you can expand one column, This could be used again for different screen sizes, just use…

flex-grow: *value*

Shrinking content

Exactly as it sounds, this is the opposite of expanding content and uses…

flex-shrink: *value*

Sounds easy doesn’t it? Thats because it is, see the codepen below for a working version of all this.

See the Pen Getting started with flex by Chris Allen (@sass-munch) on CodePen.