Skip to main content
Home / CSS Almanac / Properties / J / justify-content

justify-content

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

See the Pen Flexbox & justify-content by CSS-Tricks (@css-tricks) on CodePen.

Related Properties

Other Resources

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

ChromeOperaFirefoxIEEdgeSafari
21*12.12811126.1*

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
7.0-7.1*12.1all4.47567

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

ChromeOperaFirefoxIEEdgeSafari
604752No7611

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
11.0-11.246No677567

For more informations about how to mix syntaxes in order to get the best browser support, please refer to this article (CSS-Tricks) or this article (DevOpera).

icon-link icon-logo-star icon-search icon-star