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: flex-start | flex-end | center | space-between | space-around

.flex-item {
  justify-content: center;


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


  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.

    • Vishnu Shankar
      Permalink to comment#

      use this.

      display: -webkit-flex; /* Safari /
      -webkit-justify-content: space-around; /
      Safari 6.1+ */
      display: flex;
      justify-content: space-around;

  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.


    I just tested this as well

  3. Xavier Poinas
    Permalink to comment#

    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.

  4. kuyseng
    Permalink to comment#

    I wonder how to make space-around smaller or bigger as we want…

    • Near
      Permalink to comment#

      @kuyseng if you mean equal spacing between elements but more tightly packed, simply shorten the container or add padding to squeeze the elements together. If you mean unequal spacing (e.g. make the space between the first 2 elements narrower than the next gap), I would add empty divs between the elements with flex-grow attributes to set how the available space should be divided between the gaps. Your HTML won’t be as clean, but it will give you a lot of control, e.g. add space before the first element but not after the last, etc.

  5. Louis
    Permalink to comment#

    on safari don’t work.

  6. Ken
    Permalink to comment#

    It doesn’t seem to work in WinJs at all.

  7. RRKUK
    Permalink to comment#

    for better understanding of “display:flex” property further checkout this. I found this was more easy to understand by playing a game with CSS editor.

  8. Marc
    Permalink to comment#

    Hi !
    I tried to use “justify-content” on Sublime Text 2, but it seems not to work.
    Do I have to upgrade my ST2 or is it simply impossible ?
    Thanks in advance.

  9. Mark
    Permalink to comment#

    Is it just me or is the term ‘justify’ completely wrong here? In a typographic context, ‘Justified’ text is text is text that is adjusted so that the first and last items on a line are anchored left and right with the items in the middle distributed evenly.

    The ‘space-between’ and ‘space-around’ properties would probably accurately show this in action but ‘flex-start’ and ‘flex-end’ properties have absolutely nothing to do with ‘justifying’.

    It really bugs me when clients ask for copy to be ‘left justified’ when they actually mean ‘left aligned’.

    Just me?

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.