It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

The CSS Justify-Content Property

Reading time 2 min
Published Aug 8, 2017
Updated Oct 15, 2019

How to justify content in a flex container

If the items do not fill the whole space available to them, you can use the CSS justify-content property to align them along the horizontal axis of the flex or grid container:

Example
div {
    /* For Safari browsers */
    display: -webkit-flex; 
    -webkit-justify-content: flex-end;
    /* Standard */
    display: flex;
    justify-content: flex-end;  	
}

Tip: to accomplish the same task on the vertical axis, use align-content.

CSS justify-content: syntax requirements

The syntax for CSS justify-content is as follows:

justify-content: value;

To define the value, you can use one of the keywords explained in the following section.

Property values

Value Description
normal The default value. The items are positioned according to their default positions
flex-start The items are positioned from the start of the container
flex-end The items are positioned from the end of the container
left The items are positioned at the left side of the container
center The items are positioned at the center of the container
right The items are positioned at the right side of the container
space-around The items are positioned evenly with half-sized spaces on both ends of the container
space-between The items are positioned evenly with no remaining space on both ends of the container
space-evenly The items are positioned evenly with equal spacing around them in the container
stretch The items are positioned evenly and the items with auto sizing are stretched to fit the container

Browser support

Browser image
Chrome
29+
Browser image
Edge
12+
Browser image
Firefox
20+
Browser image
IE
11+
Browser image
Opera
12.1+
Browser image
Safari
9+

Mobile browser support

Browser image
Chrome
29+
Browser image
Firefox
20+
Browser image
Opera
12.1+
Browser image
Safari
9+