Jan 24, 2017

How to align content vertically with Flexbox

Here’s a quick and easy way on how to align an element...

Here’s a quick and easy way on how to align an element in the vertical middle of another element.

Our final result:

Back in the days, trying to make this was really difficult and we’re here to solve it.

What is Flexbox?

We’re going to use a new layout module in CSS3 called Flexbox (display:flex;).

Flexbox, for me, is one of the most powerful tools that CSS has. It provides a more efficient way to lay out elements. Flexbox is dynamic and is a great choice when you want something like what we’re going to build.

If you search “Flexbox”, you’re going to find hundreds of tutorials and probably you’re going to see three types of Flexbox. There are three versions of flexbox, but only one is the important. The spec has been for ages in the web and suffered several changes and there are a lot of out-of-date flexbox resources around, even they use different keywords for the display property:

  • display:box - The old 2009 spec
  • display:flexbox - The 2011 one
  • display:flex - The current one

TIP: Everytime you read a flexbox tutorial, check the display property keyword, if it’s display:flex you’re on a good direction!! 🎉🎊

How it works?

In the markup we create a container and specify its display as flex. This allows us to convert the container to a flex container. Inside of the container we just include an image (or whatever element you want) which it’s going to be the flex item.

A flex container contains flex items.

For this tutorial we’re going to use this image.

HTML


<div class="container">
  <img data-original="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Twemoji_1f60e.svg/200px-Twemoji_1f60e.svg.png">
</div>

CSS


.container{
  display: flex;
  width: 450px;
  height: 300px;
  background: #46B3B0; 
}

If you try this, nothing is going to happen because we have not specified some flexbox properties yet and probably the image will not look okay.

It might look like this:

That’s because the image is taking the whole height that the container has.

To align the image in the vertically middle, we use align-items and justify-content.

They’re sub-properties of the flexbox layout module.

Before diving into those sub-properties we must understand how flexbox works.

Every item inside a flex container will be laid out by following either the main axis or the cross axis. That’s why the image looked so weird, it’s being laid out by the cross axis of the flex container.

Axis: an imaginary straight line passing through the centre of a symmetrical solid, about which a plane figure can be conceived as rotating to generate the solid. [1]

The main axis is the primary axis which every flex items are laid out.

The cross axis is the perpendicular axis to the main axis. Depends always of the main axis direction.

align-items

Defines how the flex items are laid out along the cross axis flex container. It accepts 5 different values:

  1. flex-start
  2. flex-end
  3. center
  4. baseline
  5. stretch (default)

As you can see, in our case, we’re going to use “center”.

justify-content

Defines how the flex items are laid out along the main axis of the flex container. It accepts 6 different values:

  1. flex-start
  2. flex-end
  3. space-between
  4. center
  5. space-around
  6. space-evenly

Of course, we’re going to use “center”, so our CSS should now look like this:


.container{
  display: flex;
  width: 450px;
  height: 300px;
  background: #46B3B0;
  align-items:center;
  justify-content:center;
}

Plus

In the same way we did for the container element, we can convert the body to a flex container so everything is going to be aligned in the vertical middle.


body{
  height: 100vh;
  width: 100%;
  display: flex;
  align-items:center;
  justify-content:center;
  background: #FF4081;
}

This is really helpful when we want to display a loader in the middle.

Summary

We covered a lot in this post.

We learned what flexbox is, what is a flex container and a flex item and how flexbox works.

Awesome!! You did it, now you have an image perfect vertically aligned in the middle of an element.

With flexbox you can do lots of awesome things, if you want to know more about it, I recommend this guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Thank you!

Source code