The justify-content property aligns flex items along the main axis of the current line of the flex container. It is flex container property.
Syntax:
.someflexcontainer {
display: flex;
justify-content: flex-start;
}CSS property justify-content
| CSS version: | CSS 3 |
| Value: | flex-start | flex-end | center | space-between | space-around |
| Initial: | flex-start |
| Applies to: | flex containers |
| Inherited: | no |
justify-content values
| flex-start |  |
| flex-end |  |
| center |  |
| space-between |  |
| space-around |  |
Example – justify-content
In the following code, CSS property justify-content can be changed to the following values
- flex-start
- flex-end
- center
- space-between
- space-around
<style>
.fbox {
display: flex;
justify-content: flex-start;
width: 300px; background-color:gray;
}
.child {
background-color:lightgreen;
border: 1px solid black; padding: 5px;
}
</style>
<div class=fbox>
<div class="child">div1</div>
<div class="child">div2 longer text</div>
<div class="child">div3</div>
<div class="child">div4</div>
</div>justify-content refresh
Specification and Browser compatibility
| Specification | Status | Categories |
|---|---|---|
| Flexible Box Layout Module | W3C Working Draft | CSS3 |
| Chrome | Firefox | IE | Edge | Safari | Opera |
|---|---|---|---|---|---|
| Yes 29+ | Yes 28+ | Partial 11+ | Yes 12+ | Yes 9+ | Yes 12.1+ |
| Android Chrome | Android Firefox | iOS Safari | IE Mobile | Opera Mobile |
|---|---|---|---|---|
| Yes 47+ | Yes 44+ | Yes 9.0-9.2+ | Yes 11+ | Yes 12.1+ |
source: caniuse.com
