justify-content

Avatar of 34 Cross
34 Cross on (Updated on )

The justify-content property is a sub-property of the Flexible Box Layout module.

It defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

The justify-content property accepts five different values:

  • flex-start (default): items are packed toward the start line
  • flex-end: items are packed toward to end line
  • center: items are centered along the line
  • space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
  • space-around: items are evenly distributed in the line with equal space around them
  • space-evenly: items are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same

The following figure helps understand what the justify-content property actually does:

justify-content

Syntax

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly

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

Demo

The following demo shows how flex items behave depending on justify-content value:

  • The red list is set to flex-start
  • The yellow is set to flex-end
  • The blue is set to center
  • The green is set to space-between
  • The pink is set to space-around
  • The light green is set to space-evenly

Browser support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeFirefoxIEEdgeSafari
21*2811126.1*

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
1231244.47.0-7.1*

Blackberry browser 10+ supports the new syntax.

As of our latest December 2018 update, justify-content: space-evenly; is gaining support. There is a working draft spec on it.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeFirefoxIEEdgeSafari
6052No7911

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
12312412311.0-11.2

For more informations about how to mix syntaxes in order to get the best browser support, please refer to our “Using Flexbox” article .

More information