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
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.justifyContent

Interactive Demo

justify-content: start;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

One

Two

Three

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

Editor