The justify-content property in CSS is used to describe the alignment of the flexible box container. It contains the space between and around content items along the main axis of a flex container which is distributed in a browser.
Note: This property cannot be used to describe items or containers along the vertical axis. For aligning the items vertically, we can use the align-items property
The alignment is possible after applying the lengths and auto margins properties, ie., if there is at least one flexible element, with flex-grow property, other than 0, in a Flexbox layout then it will not impact & has any effect as there won’t be any available space.
Syntax:
justify-content: flex-start|flex-end|center|space-between|
space-around|space-evenly|initial|inherit;Property Values:
- flex-start: It is the default value that is used to align flex items from the start of the container.
- inherit: The items are placed according to their inherited parent element value.
- flex-end: It is used to align flex items at the end of the container.
- center: It aligns flex items at the center of the container.
- space-between: The flex items are placed with even spacing where the item is pushed to the start and the last item is pushed to the end.
- space-around: The flex items are placed with equal spacing ie., before, between, and after, from each other & the corners.
- space-evenly: The items are positioned with equal spacing between them but the spacing from corners differs.
Syntax:
justify-content: flex-start;
Example: This example illustrates the justify-content property where the property value is set to flex-start to align the item from the start of the container.
<!DOCTYPE html><html>
<head>
<title> CSS justify-content Property </title>
<style>
#box {
display: flex;
border: 1px solid black;
justify-content: flex-start;
}
#box div {
width: 110px;
height: 120px;
border: 1px solid black;
background: linear-gradient(green, silver);
}
</style>
</head>
<body>
<div id="box">
<div>1
<p>GeeksforGeeks</p>
</div>
<div>2
<p>GeeksforGeeks</p>
</div>
<div>3
<p>GeeksforGeeks</p>
</div>
<div>4
<p>GeeksforGeeks</p>
</div>
</div>
</body>
</html>
|
Output:
Example: This example illustrates the justify-content property where the property value is set to flex-end.
<!DOCTYPE html><html>
<head>
<title> CSS justify-content Property </title>
<style>
#box {
display: flex;
border: 1px solid black;
justify-content: flex-end;
}
#box div {
width: 110px;
height: 120px;
border: 1px solid black;
background: linear-gradient(green, silver);
}
</style>
</head>
<body>
<div id="box">
<div>1
<p>GeeksforGeeks</p>
</div>
<div>2
<p>GeeksforGeeks</p>
</div>
<div>3
<p>GeeksforGeeks</p>
</div>
<div>4
<p>GeeksforGeeks</p>
</div>
</div>
</body>
</html>
|
Output:
Example: This example illustrates the justify-content property where the property value is set to center.
<!DOCTYPE html><html>
<head>
<title> CSS justify-content Property </title>
<style>
#box {
display: flex;
border: 1px solid black;
justify-content: center;
}
#box div {
width: 110px;
height: 120px;
border: 1px solid black;
background: linear-gradient(green, silver);
}
</style>
</head>
<body>
<div id="box">
<div>1
<p>GeeksforGeeks</p>
</div>
<div>2
<p>GeeksforGeeks</p>
</div>
<div>3
<p>GeeksforGeeks</p>
</div>
<div>4
<p>GeeksforGeeks</p>
</div>
</div>
</body>
</html>
|
Output:
Example: This example illustrates the justify-content property where the property value is set to space-between.
<!DOCTYPE html><html>
<head>
<title> CSS justify-content Property </title>
<style>
#box {
display: flex;
border: 1px solid black;
justify-content: space-between;
}
#box div {
width: 110px;
height: 120px;
border: 1px solid black;
background: linear-gradient(green, silver);
}
</style>
</head>
<body>
<div id="box">
<div>1
<p>GeeksforGeeks</p>
</div>
<div>2
<p>GeeksforGeeks</p>
</div>
<div>3
<p>GeeksforGeeks</p>
</div>
<div>4
<p>GeeksforGeeks</p>
</div>
</div>
</body>
</html>
|
Output:
Example: This example illustrates the justify-content property where the property value is set to space-around.
<!DOCTYPE html><html>
<head>
<title> CSS justify-content Property </title>
<style>
#box {
display: flex;
border: 1px solid black;
justify-content: space-around;
}
#box div {
width: 110px;
height: 120px;
border: 1px solid black;
background: linear-gradient(green, silver);
}
</style>
</head>
<body>
<div id="box">
<div>1
<p>GeeksForGeeks</p>
</div>
<div>2
<p>GeeksForGeeks</p>
</div>
<div>3
<p>GeeksForGeeks</p>
</div>
<div>4
<p>GeeksForGeeks</p>
</div>
</div>
</body>
</html>
|
Output:
Example: This example illustrates the justify-content property where the property value is set to space-evenly.
<!DOCTYPE html><html>
<head>
<title> CSS justify-content Property </title>
<style>
#box {
display: flex;
border: 1px solid black;
justify-content: space-evenly;
}
#box div {
width: 110px;
height: 120px;
border: 1px solid black;
background: linear-gradient(green, silver);
}
</style>
</head>
<body>
<div id="box">
<div>1
<p>GeeksforGeeks</p>
</div>
<div>2
<p>GeeksforGeeks</p>
</div>
<div>3
<p>GeeksforGeeks</p>
</div>
<div>4
<p>GeeksforGeeks</p>
</div>
</div>
</body>
</html>
|
Output:
initial: The items are placed according to the default value.
Syntax:
justify-content: initial;
Example: This example illustrates the justify-content property where the property value is set to initial.
<!DOCTYPE html><html>
<head>
<title> CSS justify-content Property </title>
<style>
#box {
display: flex;
border: 1px solid black;
justify-content: initial;
}
#box div {
width: 110px;
height: 120px;
border: 1px solid black;
background: linear-gradient(green, silver);
}
</style>
</head>
<body>
<div id="box">
<div>1
<p>GeeksforGeeks</p>
</div>
<div>2
<p>GeeksforGeeks</p>
</div>
<div>3
<p>GeeksforGeeks</p>
</div>
<div>4
<p>GeeksforGeeks</p>
</div>
</div>
</body>
</html>
|
Output:
Example: This example illustrates the justify-content property where property value is set to inherit.
<!DOCTYPE html><html>
<head>
<title> CSS justify-content Property </title>
<style>
#box {
display: flex;
border: 1px solid black;
justify-content: inherit;
}
#box div {
width: 110px;
height: 120px;
border: 1px solid black;
background: linear-gradient(green, silver);
}
</style>
</head>
<body>
<div id="box">
<div>1
<p>GeeksforGeeks</p>
</div>
<div>2
<p>GeeksforGeeks</p>
</div>
<div>3
<p>GeeksforGeeks</p>
</div>
<div>4
<p>GeeksforGeeks</p>
</div>
</div>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by CSS justify-content property are listed below:
- Google Chrome 29.0 and above
- Internet Explorer 11.0 and above
- Microsoft Edge 12.0 and above
- Firefox 20.0 and above
- Opera 12.1 and above
- Safari 9.0 and above