🚨 Time is Running Out: Reserve Your Spot in the Lucky Draw & Claim Rewards! START NOW

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.

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
edX
Pros
  • A wide range of learning programs
  • University-level courses
  • Easy to navigate
  • Verified certificates
  • Free learning track available
Main Features
  • University-level courses
  • Suitable for enterprises
  • Verified certificates of completion

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+