UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.
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 lineflex-end: items are packed toward to end linecenter: items are centered along the linespace-between: items are evenly distributed in the line; first item is on the start line, last item on the end linespace-around: items are evenly distributed in the line with equal space around themspace-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:
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
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 21* | 28 | 11 | 12 | 6.1* |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 115 | 115 | 4.4 | 7.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
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 60 | 52 | No | 79 | 11 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 115 | 115 | 115 | 11.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
- CSS Flexible Box Layout Module Level 1
- How To Use CSS Grid to Justify and Align Content and Items
- A Complete Guide to Flexbox
- Using Flexbox
- Old Flexbox and new Flexbox
Related guides
Related tricks!
A Quick Way to Remember the Difference Between `justify-content` and `align-items`
Building a Conference Schedule with CSS Grid
Centering: The Newest Coolest Way vs. The Oldest Coolest Way
Control Layout in a Multi-Directional Website
Fun Times With Sizing Grid Elements
Please Give Me Some Space
Related
align-content
.element { align-content: space-around; }
align-items
.element { align-items: flex-start; }
align-self
.box { align-self: flex-end; }
display
.element { display: inline-block; }
flex-direction
.element { flex-direction: column-reverse; }
flex-flow
.element { flex-flow: row wrap; }
flex-wrap
.example { flex-wrap: wrap; }
justify-items
.element { justify-items: center; }
justify-self
.element { justify-self: stretch; }
place-content
place-items
.element { place-items: center; }
place-self
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.
use this.
display: -webkit-flex; /* Safari /
-webkit-justify-content: space-around; / Safari 6.1+ */
display: flex;
justify-content: space-around;
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
have a test
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.
I wonder how to make space-around smaller or bigger as we want…
@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.
on safari don’t work.
It doesn’t seem to work in WinJs at all.
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/
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.
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?
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.
As of that date, yep, you’re correct.
It also works in Chrome. I’m on version 60.0.3112.90 and
justify-content: space-evenlyworks just fine.I’m using Chrome too, and
space-evenlyworks great. I hope the other browsers support it soon, as I much prefer that look overspace-aroundin my current project.space-evenly currently doesn’t work on Safari on iPhone 6 :(
The option is not an attribute of a flex-item, but of the flex container.
If we define a flex-fallback with floats, a
.clearfixon the wrapper-element can be necessary. But the usual pseudo-element clearfix causes problems with thejustify-content: space-betweendeclaration, cause it reacts as a additional flex-element. I.e. the space will distributet unevenly.In this case we have to distribute the space manually (
margin-x: auto;) or use another clearfix-method, which can have other issues.Any other workarounds for that?
Hi, I think syntax section is a bit misleading as justify-content is flex container property, not flex-item, so should be
.flex-container {
justify-content: center;
}
instead of
.flex-item {
justify-content: center;
}
I’m trying to obtain the same result with
justify-contentas I get with{align-items:stretch}Any idea how to accomplish this safely across devices?
Ideally I’d need to also be able to override
{justify-content: flext-start}for example.I’ve been using
{justify-content: stretch}but the results are mixed.This is so frustrating. The effect of display:flex and justify-content is not just to align small items along the major axis, but also to wrap along the cross axis. I can’t find any information about why items are not flush together along the cross axis when they are wrapped!