Justify Content

on May 3, 2020
🔥 1196 views
Contents hide
1) Default Value
2) Flex End
3) Center Aligned
4) Space Between
5) Space Around
6) Space Evenly
6.1) DEMO

In this tutorial, we will look into the alignment property provided by the flex container starting off with justify-content.

Default Value

by default, justify-content is set to the value to the flex-start which places the item at the beginning of the main axis.

style.css

.container {
  display: flex;
  justify-content: flex-start;   /* Default Value */
}

As the main axis flows from left to right so the by default items starts from the left

Flex End

This causes the item to be placed at the end of the main axis.

style.css

.justify-flex-end {
  justify-content: flex-end;
}

and the markup will be :

index.html

<div class="container d-flex justify-flex-end">
  ...
</div>

After this what we will get to display is:
flex-end

Center Aligned

it is also possible to align the content at the center of the main axis and the value of the property is

style.css

.justify-center {
  justify-content: center;
}

and the markup will be :

index.html

<div class="container d-flex justify-center">
  ...
</div>

After this what we will get to display is:
center

Space Between

Flexbox also provides additional value that can control how the extra space has to be distributed so ve have a value of space-between.

style.css

.justify-space-between {
  justify-content: space-between;
}

and the markup will be :

index.html

<div class="container d-flex justify-space-between">
  ...
</div>

After this what we will get to display is:
space-between
you can see that the extra space that was left out is evenly split and added in between the flex items.

Space Around

Sometime you might also want the space the first item and after the last item for such a scenario we have space-around value.

style.css

.justify-space-around {
  justify-content: space-around;
}

and the markup will be :

index.html

<div class="container d-flex justify-space-around">
  ...
</div>

After this what we will get to display is:
space-around
The space at the beginning and at the end is half the space between the flex item.

Space Evenly

However, if you want the same space even at the start and at the end of the item the value can be space-evenly.

style.css

.justify-space-evenly {
  justify-content: space-evenly;
}

and the markup will be :

index.html

<div class="container d-flex justify-space-evenly">
  ...
</div>

After this what we will get to display is:
space-evenly
The space at the beginning and at the end is half the space between the flex item.

what you have to keep in mind is justify-content property aligns items based on the main axis, so if we set the flex-direction to column the property will deal with vertical alignment.

DEMO

See the Pen
Flex Justify Content by rehmaanali (@geekstrick)
on CodePen.

justify content