Horizontal alignment and vertical alignment are one of those tasks that regular web developers encounter on an everyday basis. Whatever project you need to build (blog, online magazine, or digital store), chances are you will create more than just a primitive left-sided structure. As a rule, every modern website design has a complex underlying skeleton; therefore, solutions for positioning are imperative.

The alignment was to be hard several years ago. You had to employ various tricks and even Javascript fallbacks to achieve the desired result. Today, the situation is different. The thing is, almost all popular browsers catch up to Flexbox specifications. It means that we can finally enjoy all its possibilities, specifically align blocks without hustle and bustle.

If you are ready to improve your workflow with this exceptional CSS tool, then we are ready to show you how to align blocks with Flexbox.

How to Align Blocks with Flexbox

The Flexible box module gives you control of not just bare alignment but also direction, order, and spacing between the elements. While in its core, it is a sophisticated solution, aligning blocks with Flexbox is a child’s play. It has a super intuitive syntax that can be handled even by the newbies. Let us dig a little bit deeper to see it for yourself.

Basics of Flexbox Alignment

Flexbox is a sterling layout module. It has many utilities for fine-tuning container’s children. This complex solution covers all the essentials giving you a universal tool for manipulating everything inside.

To start with Flexbox all you need to do is to define a flexbox container like this:

.container {
  display: flex; 
}

If you want to specify that the container should be displayed inline explicitly, you can go for this syntax:

.container {
  display: inline-flex;
}

Whether you use inline-flex or flex value, there will be no difference in effect on flex items, aka children of the container. Flex items always behave like block-level components that partially have some inline-block features. Therefore, as a rule, developers prefer to use the first piece of code.

It is important to note if you set only display: flex property for the container, it will also have such default characteristics as

  • flex-direction: row. It means that the direction for children will be left to right in LTR, and right to left in RTL.
  • flex-wrap: nowrap. It means that all children will be on one line.
  • justify-content: flex-start. It means that the children will be aligned toward the start of the flex-direction. Since default flex-direction is row, your children will be located on the left in LTR, or on the right in RTL.
  • align-items: stretch. It means that children will fill the entire container.
  • align-content: flex-start. Children will be located at the start of the container.

Therefore, if these values suit your needs, then you don’t have to re-set them.

Properties for the Flex Container

Flexbox has the ability to control children’s width and height to create a flex container. Therefore, it has properties that let you assign direction and spacing. We have already mentioned them in the previous section. Let’s clear things up a bit.

Flex-direction

Unlike Grid, Flexbox is a single-direction solution. Therefore, you can assign either horizontal or vertical direction for items inside the container. There are four possible values:

  • row, aka left to right.
  • row-reverse, aka right to left.
  • column, aka top to bottom.
  • column-reverse, aka bottom to top.

Here is an example:

.container {
  display: flex;
  flex-direction: row;
}

Flex-wrap

Flex-wrap lets you assign whether to fit all children into one line or not. The possible options are:

  • nowrap;
  • wrap;
  • wrap-reverse.

The values do what they say, so there is no point in clarifying them.

.container {
  display: flex;
  flex-wrap: nowrap; 
}

Justify-content

This property controls space distribution between children inside the container. It is highly essential since it underlies the alignment. There are 6 options to manipulate:

  • flex-start;
  • flex-end;
  • center;
  • space-between;
  • space-around;
  • space-evenly.

Although all the options are self-explanatory, however, the last three might cause some confusion. Let us clear things up.

Space-between is used to evenly distribute items inside the container with the first item attached to the left and the last item attached to the right.

Space-around is used to distribute items evenly, however this time, both first and last items will have space between them and edges of the container.

Space-evenly is used to evenly distribute items, however, this time, the space between the two children will be the same. It means that the first child and the last one will have the doubled space between them and the edges of the container.

.container {
  display: flex;
  justify-content: flex-start;
}

It is important to note that modern browsers do not fully support all these values. For instance, Edge does render it with nuances.

Align-items

Much like the previous property, align-items is vital for alignment purposes. This property defines how the children inside the container will be laid out depending on the cross axis. There are several possible values:

  • stretch;
  • flex-start;
  • flex-end;
  • center;
  • baseline;

As a matter of fact, there are more options such as start, end, self-start, self-end, first baseline, last baseline. However, they lack full cross-browser support. In addition, you will not see a drastic difference between them and their corresponding alternatives. Therefore, it is highly recommended to use only those that are shown in the list above. 

.container {
  display: flex;
  align-items: stretch;
}

Align-content

Align-content defines the behavior for the lines of content inside the container. Therefore, if you have several rows of content inside the block, and you want to align them according to your needs, you should tweak this property. There are several values:

  • flex-start;
  • flex-end;
  • center;
  • space-between;
  • space-around ;
  • space-evenly;
  • stretch;

These properties have the same meaning as those that are listed in a justify-content property.

.container {
  display: flex;
  align-content: flex-start;
}

How to Align Blocks Horizontally with Flexbox

Unlike the old-school tricks for aligning blocks horizontally, Flexbox has several properties that do all the heavy lifting. It is here where you need to mix and match justify-content, align-items, and align-content (in case you have more than just one line of children inside the container) to obtain the desired result. With these three properties, aligning blocks horizontally turns into a piece of cake.

First and foremost you need to assign the flexbox container, like this

.container {
  display: flex;
}

After that, we are going to manipulate with properties to find out how to align blocks to the left or right side of the container as well as position them at the center.

How to Align Blocks to the Left Side with Flexbox

To align blocks to the left, you need to set the direction property to the default value and justify-content property to the start of the container. Here is an example, 

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

If the container has a great height, and you want your children to be positioned right on the top, you need to add an align-items property. The code should look like this

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

In case you need your items to be located on the left side, yet in the middle of the container, you can set align-items to the center. Here’s an example for that 

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

If you need the children to be at the left side but on the bottom of the container, set the align-items property to flex-end, like this

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
}

How to Align Blocks to the Right Side with Flexbox

Much like with aligning blocks to the left side, it is here where the direction property solves the issue. Set it to row-reverse, and all children will re-locate to the right side. In addition, to properly redistribute space between the items along the main axis set justify-content to the flex-start.  

.container {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
}

Alternatively, you can stick to the default value for direction but simply change justify-content to the flex-end. Here is the code for that

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

To place children either in the middle or bottom of the container, set the align-items property accordingly.

To center right-sided children use this piece of code:

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

To place everyone at the bottom of the box, use this piece of code:

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
}

How to Center Blocks inside the Container with Flexbox

With Flexbox, one of the most confusing and long-standing problems has been sorted out. Let’s find out how to center div inside div using Flexbox.

First, we are going to center just one block inside another block. It is here where we still can use margin. Here is an example:

.container{
  display: flex;
}

.child {
  margin: auto; 
}
<div class="container">
    <div class="child">...</div>
</div>

What if we want to center horizontally several children, like, for example, navigation links. Then, we will use the full power hidden inside Flexbox and employ the justify-content property. Here is an example: 

.container{
    display: flex;
    flex-direction: row; 
    justify-content: center;
}

If the container has a great height, but you need all children to sit in the heart of it (so-to-say in the middle), you should add an align-items property, like this: 

.container{
    display: flex;
    flex-direction: row; 
    justify-content: center;
    align-items:center;
}

Another way to center items inside the container is to play with a justify-content feature. For example, you can use the space-evenly option to give the first and last item of the group spaces between them and edges of the container and, in this way, imitate the center position. This trick proves to be viable only with many children inside the container. The code might look like this:

.container{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;    
}

How to Align Box Vertically with Flexbox

If you compare and contrast alternative solutions for aligning boxes vertically, you will see that Flexbox is increasingly intuitive and organized. It deals with the problem quite efficiently, saving you from lots of troubles.

The first thing to do when you need to align blocks vertically with Flexbox is to change the default direction and consider the container as a column rather than a row. Here is a code for that: 

.container{
    display: flex;
    flex-direction: column;
}

How to Align Blocks to Top or Bottom of the Container with Flexbox

To align blocks to the top or bottom of the container, you should specify the alignment rules for the children. For example, if you need your children to be located on the top, you should set justify-content to flex-start since the top is a start.  

.container{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

If you need the flow inside the container to start from the bottom, you can either set justify-content to flex-end or simply reverse the direction of the column. Let us consider both solutions: 

.container{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

Alternatively

.container{
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
}

How to Center Div inside Another Div with Flexbox

Perfect centering has never been easy, however with Flexbox, the game has changed cardinally. This convoluted problem has a really simple solution now: just set justify-content and align-items to the center. Here is an example:

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Wrapping Up

No position, no float, no messy code, and no unexpected outcomes. With Flexbox, everything is clean and clear. Thanks to improved browser support, it has become a universal tool for solving daily problems such as aligning blocks horizontally and vertically as well as perfect centering.

According to CanIUse, only IE11 has a lack of full support for the box layout module (no surprises here, whatsoever), therefore, you can freely use Flexbox in your projects without concerns about the fallbacks or possible inconsistent behavior.

If you wish to learn more about CSS, check out our collection of CSS tutorials.