CSS - justify-content Property
CSS justify-content property determines the alignment and allocation of space between content items along the main axis of a flex container or the inline axis of a grid container. In the case of flex container, the direction of main axis is determined by flex-direction and the direction perpendicular to main-axis is the cross-axis.
Syntax
Positional Alignment
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | initial | inherit;
Property Values
| Value | Description |
|---|---|
| flex-start | The items are positioned at the start of the container. Default. |
| flex-end | The items are positioned at the end of the container. |
| center | The items are positioned at the center of the container. |
| space-between | The items in the container have space between them. |
| space-around | The items in the container have space before, between and after them. |
| space-evenly | The items in the container have equal space around them. |
| initial | It sets the property to its default value. |
| inherit | It inherits the property from the parent element. |
Examples of CSS Justify Content Property
The following examples explain the justify-content property with different values.
Justify Content Property with Flex Start Value
To position the items at the start of a flex container along the main-axis, we use the flex-start value. This is shown in the following example.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: flex-start;
gap: 10px;
border: 2px solid black;
height: 200px;
padding: 5px;
}
.container>div {
background-color: lightblue;
text-align: center;
bordeR: 2px solid blue;
color: white;
padding: 15px;
height: 20px;
width: 60px;
}
</style>
</head>
<body>
<h2>
CSS justify-content property
</h2>
<h4>
justify-content: flex-start; display:flex
</h4>
<div class="container">
<div>
Item-1
</div>
<div>
Item-2
</div>
<div>
Item-3
</div>
</div>
</body>
</html>
Justify Content Property with Flex End Value
To position the items at the end of a flex container along the main-axis, we use the flex-end value. This is shown in the following example.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: flex-end;
gap: 10px;
border: 2px solid black;
height: 200px;
padding: 5px;
}
.container>div {
background-color: lightblue;
text-align: center;
bordeR: 2px solid blue;
color: white;
padding: 15px;
height: 20px;
width: 60px;
}
</style>
</head>
<body>
<h2>
CSS justify-content property
</h2>
<h4>
justify-content: flex-end; display:flex
</h4>
<div class="container">
<div>
Item-1
</div>
<div>
Item-2
</div>
<div>
Item-3
</div>
</div>
</body>
</html>
Justify Content Property with Center Value
To position the items at the center of a flex container along the main-axis, we use the center value. This is shown in the following example.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
gap: 10px;
border: 2px solid black;
height: 200px;
padding: 5px;
}
.container>div {
background-color: lightblue;
text-align: center;
bordeR: 2px solid blue;
color: white;
padding: 15px;
height: 20px;
width: 60px;
}
</style>
</head>
<body>
<h2>
CSS justify-content property
</h2>
<h4>
justify-content: center; display:flex
</h4>
<div class="container">
<div>
Item-1
</div>
<div>
Item-2
</div>
<div>
Item-3
</div>
</div>
</body>
</html>
Justify Content Property with Space Between Value
To position the items in a flex container along the main-axis such that they have space betweent them, we use the space-between value. This is shown in the following example.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: space-between;
gap: 10px;
border: 2px solid black;
height: 200px;
padding: 5px;
}
.container>div {
background-color: lightblue;
text-align: center;
bordeR: 2px solid blue;
color: white;
padding: 15px;
height: 20px;
width: 60px;
}
</style>
</head>
<body>
<h2>
CSS justify-content property
</h2>
<h4>
justify-content: space-between; display:flex
</h4>
<div class="container">
<div>
Item-1
</div>
<div>
Item-2
</div>
<div>
Item-3
</div>
</div>
</body>
</html>
Justify Content Property with Space Around Value
To position the items in a flex container along the main-axis such that they have space before, after and between them, we use the space-around value. This is shown in the following example.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: space-around;
gap: 10px;
border: 2px solid black;
height: 200px;
padding: 5px;
}
.container>div {
background-color: lightblue;
text-align: center;
bordeR: 2px solid blue;
color: white;
padding: 15px;
height: 20px;
width: 60px;
}
</style>
</head>
<body>
<h2>
CSS justify-content property
</h2>
<h4>
justify-content: space-around; display:flex
</h4>
<div class="container">
<div>
Item-1
</div>
<div>
Item-2
</div>
<div>
Item-3
</div>
</div>
</body>
</html>
Justify Content Property with Space Evenly Value
To position the items in a flex container along the main-axis such that they have equal distribution of space around them, we use the space-evenly value. This is shown in the following example.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: space-evenly;
gap: 10px;
border: 2px solid black;
height: 200px;
padding: 5px;
}
.container>div {
background-color: lightblue;
text-align: center;
bordeR: 2px solid blue;
color: white;
padding: 15px;
height: 20px;
width: 60px;
}
</style>
</head>
<body>
<h2>
CSS justify-content property
</h2>
<h4>
justify-content: space-evenly; display:flex
</h4>
<div class="container">
<div>
Item-1
</div>
<div>
Item-2
</div>
<div>
Item-3
</div>
</div>
</body>
</html>
Justify Content Property with Grid Layout
The justify-content property can also be used with the grid layout to align items in the inline direction. This is shown in the following example.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
justify-content: center;
gap: 10px;
border: 2px solid black;
height: 300px;
padding: 5px;
}
.container>div {
background-color: lightblue;
text-align: center;
bordeR: 2px solid blue;
color: white;
padding: 15px;
height: 30px;
width: 80px;
}
</style>
</head>
<body>
<h2>
CSS justify-content property
</h2>
<h4>
justify-content: center; display:grid
</h4>
<div class="container">
<div>
Item-1
</div>
<div>
Item-2
</div>
<div>
Item-3
</div>
</div>
</body>
</html>
Supported Browsers
| Property |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| justify-content | 29.0 | 11.0 | 28.0 | 9.0 | 17.0 |