CSS justify-content – flexbox children aligment

The justify-content property aligns flex items along the main axis of the current line of the flex container. It is flex container property.


.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 flexbox-justify-content-flex-start
flex-end flexbox-justify-content-flex-end
center flexbox-justify-content-center
space-between flexbox-justify-content-space-between
space-around flexbox-justify-content-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
.fbox {
  display: flex;
  justify-content: flex-start;
  width: 300px; background-color:gray;
.child {
  border: 1px solid black; padding: 5px;

<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>
justify-content refresh

Specification and Browser compatibility

Flexible Box Layout ModuleW3C Working DraftCSS3
Yes 29+ Yes 28+ Partial 11+ Yes 12+ Yes 9+ Yes 12.1+
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ Yes 44+ Yes 9.0-9.2+ Yes 11+ Yes 12.1+
source: caniuse.com
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit


Click here to write/view comments