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 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
  • 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

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

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.

As of our latest July 2017 update, `justify-content: space-evenly;` only works in Firefox.

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. User Avatar
    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.

    • User Avatar
      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. User Avatar
    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. User Avatar
    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. User Avatar
    kuyseng
    Permalink to comment#

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

    • User Avatar
      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. User Avatar
    Louis
    Permalink to comment#

    on safari don’t work.

  6. User Avatar
    Ken
    Permalink to comment#

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

  7. User Avatar
    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.
    http://flexboxfroggy.com/

  8. User Avatar
    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. User Avatar
    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?

  10. User Avatar
    Patrick Ryll
    Permalink to comment#

    I am pretty sure that as of today (August 4th, 2017), justify-content: space-evenly is not yet available. It seems to work in Firefox; however, I can’t find anything that explictly says this. Can anyone confirm this? Thanks.

    • User Avatar
      Chris Coyier
      Permalink to comment#

      As of that date, yep, you’re correct.

    • User Avatar
      Crystal Gardner
      Permalink to comment#

      It also works in Chrome. I’m on version 60.0.3112.90 and justify-content: space-evenly works just fine.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag