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 | |||||
 |
 |
 |
 |
 |
 |
| 11 | 12 | 52 | 20 | 12.1 | 9 |
| Tablets / Mobile | |||||
 |
|
|
|
|
 |
| 52 | 52 | 20 | 12.1 | 9 | Yes |
