Grow your CSS skills. Land your dream job.

justify-content

Last 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 5 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

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

.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
Check out this Pen!

Related Properties

Other Resources

Browser Support

  • (modern) means the recent syntax from the specification (e.g. display: flex;)
  • (hybrid) means an odd unofficial syntax from 2011 (e.g. display: flexbox;)
  • (old) means the old syntax from 2009 (e.g. display: box;)
Chrome Safari Firefox Opera IE Android iOS
21+ (modern)
20- (old)
3.1+ (old) 2-21 (old)
22+ (new)
12.1+ (modern) 10+ (hybrid) 2.1+ (old) 3.2+ (old)

Blackberry browser 10+ supports the new syntax.

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).

Comments

  1. Andy Jakubowski

    The Demo is not displaying correctly on Safari, both desktop and iOS. Any idea why? I’ve tried all the different prefixes and syntaxes and nothing seems to work.

  2. Glynn Phillips
    Permalink to comment#

    I believe justify-content is not support on either safari or iOS. I think this article is actually referencing the support for flexbox rather than the actually property it is discussing.

    https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#Browser_compatibility

    I just tested this as well

  3. I found that the -webkit-box-pack property would behave pretty much like justify-content on Safari/iOS (at least in my test cases). See the Safari Documentation.

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".