CSS justify-content Property

Description

The justify-content property determines how the browser distributes the space around flex elements along the container’s main axis. This is done after the sizes and auto-indentation are applied, except when at least one flex-grow element has more than zero. In this case, there is no free space left for manipulation.

Initial value
flex-start
Applies to
Flex containers
Inherited
No
Media
Visual
Computed value
As specified
Animatable
No
CSS Version
CSS3
JavaScript syntax
object.style.justifyContent

Syntax

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly 

Values

  • flex-startElements are positioned at the beginning of the container. This is the default value. For layout grid elements (grid elements), the abbreviated start value is allowed; for flex elements, the full flex-start value must be used.
  • flex-endElements are positioned at the end of the container. For layout grid elements (grid elements), the abbreviated end value is allowed; for flex elements, the full flex-end value must be used.
  • centerElements are positioned in the center of the container.
  • space-betweenElements are evenly distributed throughout the line, with the first element being positioned at the beginning of the container, and the last element being positioned at the end of the container.
  • space-aroundElements are evenly distributed throughout the row, with the empty space between the first and after the last element equal to half between adjacent elements in the container.
  • space-evenlyPlaces an even gap between each element, including the beginning and the far end of the container.

Example

<body>
<div class="grid-container"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div></div>
<div class="grid-container2"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div></div>
<div class="grid-container3"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div></div>
<div class="grid-container4"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div></div>
<div class="grid-container5"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div></div>
<div class="grid-container6"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div></div>
</body>
body {
  display: flex; 
  flex-wrap: wrap;
} 
.grid-container,
.grid-container2,
.grid-container3,
.grid-container4,
.grid-container5,
.grid-container6 {
    display: inline-grid; 
    grid: auto / repeat(3, 40px); 
    height: 120px;
    width: 30%;
    background: rgb(0,150,208); 
    margin: 10px; 
    text-align: center;
}
div > div { 
    background: rgb(241,101,41); 
    border: 1px solid; 
} 
.grid-container {
    justify-content: start;
}
.grid-container2 {
    justify-content: end;
}
.grid-container3 {
    justify-content: center; 
}
.grid-container4 {
    justify-content: space-between; 
}
.grid-container5 {
    justify-content: space-around;
}
.grid-container6 {
    justify-content: space-evenly; 
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
1112522012.19
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
52522012.19Yes