The CSS property justify-content indicates how the flexible box container is aligned. It includes the area between and around content items along a flex container's main axis spread across a browser.
Note that this attribute can describe nothing along the vertical axis. The align-items attribute may be used to align the elements vertically.
If there is at least one flexible element with a flex-grow property other than 0 in a Flexbox layout, then it will not influence & has no effect since there won't be any accessible space. The alignment is feasible after applying the lengths and auto margins settings.
Syntax
justify-content: flex-start | flex-end | center | space-between|
space-around | space-evenly | initial | inherit;
The default value of this property is set to flex-start. Let's delve deeper into the significance of this property value.
Property Values
- Flex-start: The default setting for aligning flex elements from the beginning of the container is flex-start.
- Inherit: The elements are arranged according to the value of their inherited parent element.
- Flex-end: It aligns flex elements at the container's end.
- Center: The container's center is where the flex elements are aligned.
- Space-between: Flex items are arranged with equal spacing, with the first thing pushed to the front and the final item pushed to the back.
- Space-around: The flexible elements are positioned before, between, and after each other, and the corners with equal spacing.
- Space-evenly: The items are arranged uniformly in space, but the distances from the corners differ.
Flex-start
This instance demonstrates the justify-content attribute with the value set to flex-start to align the item from the start of the container.
Syntax
justify-content: flex-start;
Program
<!DOCTYPE html>
<html>
<head>
<title> CSS justify-content Property with flex-start as property </title>
<style>
#box {
display: flex;
border: 1px solid black;
justify-content: flex-start;
}
#box div {
width: 170px;
height: 120px;
border: 1px solid black;
background: linear-gradient(pink, black);
}
</style>
</head>
<body>
<div id="box">
<div>
<p>Box 1</p>
</div>
<div>
<p>Box 2</p>
</div>
<div>
<p>Box 3</p>
</div>
</div>
</body>
</html>
Output
Flex-end
This illustration demonstrates the justify-content attribute set to the value flex-end for alignment.
Syntax
justify-content: flex-end;
Program
<!DOCTYPE html>
<html>
<head>
<title> CSS justify-content Property with flex-end property </title>
<style>
#box {
display: flex;
border: 1px solid black;
justify-content: flex-end;
}
#box div {
width: 170px;
height: 130px;
border: 1px solid black;
background: linear-gradient(pink, black);
}
</style>
</head>
<body>
<div id="box">
<div>
<p>Box 1</p>
</div>
<div>
<p>Box 2</p>
</div>
<div>
<p>Box 3</p>
</div>
</div>
</body>
</html>
Output
Center
This instance demonstrates the justify-content attribute set to center alignment.
Syntax
justify-content: center;
Program
<!DOCTYPE html>
<html>
<head>
<title> CSS justify-content Property with property value as center </title>
<style>
#box {
display: flex;
border: 1px solid black;
justify-content: center;
}
#box div {
width: 170px;
height: 130px;
border: 1px solid black;
background: linear-gradient(pink, black);
}
</style>
</head>
<body>
<div id="box">
<div>
<p>Box 1</p>
</div>
<div>
<p>Box 2</p>
</div>
<div>
<p>Box 3</p>
</div>
</div>
</body>
</html>
Output
Space-between
This instance demonstrates the justify-content attribute using the value set to space-between.
Syntax
justify-content: space-between;
Program
<!DOCTYPE html>
<html>
<head>
<title> CSS justify-content Property with property value as space-between </title>
<style>
#box {
display: flex;
border: 1px solid black;
justify-content: space-between;
}
#box div {
width: 170px;
height: 130px;
border: 1px solid black;
background: linear-gradient(pink, black);
}
</style>
</head>
<body>
<div id="box">
<div>
<p>Box 1</p>
</div>
<div>
<p>Box 2</p>
</div>
<div>
<p>Box 3</p>
</div>
</div>
</body>
</html>
Output
Space-around
Example: This instance showcases the justify-content attribute with the value set as space-around.
Syntax
justify-content: space-around;
Program
<!DOCTYPE html>
<html>
<head>
<title> CSS justify-content Property with property value as space-between </title>
<style>
#box {
display: flex;
border: 1px solid black;
justify-content: space-around;
}
#box div {
width: 170px;
height: 130px;
border: 1px solid black;
background: linear-gradient(pink, black);
}
</style>
</head>
<body>
<div id="box">
<div>
<p>Box 1</p>
</div>
<div>
<p>Box 2</p>
</div>
<div>
<p>Box 3</p>
</div>
</div>
</body>
</html>
Output
Space-evenly
Example: This instance showcases the justify-content attribute utilizing the value set as space-evenly.
Syntax
justify-content: space-evenly;
Program
<!DOCTYPE html>
<html>
<head>
<title> CSS justify-content Property with property value as space-between </title>
<style>
#box {
display: flex;
border: 1px solid black;
justify-content: space-evenly;
}
#box div {
width: 170px;
height: 130px;
border: 1px solid black;
background: linear-gradient(pink, black);
}
</style>
</head>
<body>
<div id="box">
<div>
<p>Box 1</p>
</div>
<div>
<p>Box 2</p>
</div>
<div>
<p>Box 3</p>
</div>
</div>
</body>
</html>
Output
Initial
This illustration demonstrates the utilization of the justify-content attribute with the value set to initial.
Syntax
justify-content: initial;
Program
<!DOCTYPE html>
<html>
<head>
<title> CSS justify-content Property with property value as space-between </title>
<style>
#box {
display: flex;
border: 1px solid black;
justify-content: initial;
}
#box div {
width: 170px;
height: 130px;
border: 1px solid black;
background: linear-gradient(pink, black);
}
</style>
</head>
<body>
<div id="box">
<div>
<p>Box 1</p>
</div>
<div>
<p>Box 2</p>
</div>
<div>
<p>Box 3</p>
</div>
</div>
</body>
</html>
Output
Inherit
This example illustrates how the justify-content property functions when the value of the property is set to inherit.
Syntax
justify-content: inherit;
Program
<!DOCTYPE html>
<html>
<head>
<title> CSS justify-content Property with property value as space-between </title>
<style>
#box {
display: flex;
border: 1px solid black;
justify-content: inherit;
}
#box div {
width: 170px;
height: 130px;
border: 1px solid black;
background: linear-gradient(pink, black);
}
</style>
</head>
<body>
<div id="box">
<div>
<p>Box 1</p>
</div>
<div>
<p>Box 2</p>
</div>
<div>
<p>Box 3</p>
</div>
</div>
</body>
</html>
Output
Web Browsers Supported
The list of supported browsers for the CSS justify-content attribute follows:
- Google Chrome version 29.0 and above
- Using Internet Explorer 11.0 or higher
- Microsoft Edge version 12.0 and above
- Opera 12.1 and above
- Firefox 20.0
- For Safari 9.0 and above