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

HTML

<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>

CSS

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; 
}

Result

Browser Support

Desktop

11	12	52	20	12.1	9

Tablets / Mobile

52	52	20	12.1	9	6.0

Last updated by CSSPortal on: 5th November 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu