CSS Justify-Content Property

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;

This property's default value is flex-start. Let's have a thorough understanding of its property worth.

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

Example: This example shows the justify-content property with the property value set to flex-start to align the item from the container's beginning.

Syntax

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

Example: This example shows the justify-content property with the property value specified as flex-end.

Syntax

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

Example: This example shows the justify-content property with the value adjusted to the center.

Syntax

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

Example: This example shows the justify-content property with the property value specified as space-between.

Syntax

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 example displays the justify-content property with the property value specified as space-around.

Syntax

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 example displays the justify-content property with the property value defined as space-evenly.

Syntax

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

Example: This example shows how to use the justify-content property with the property value set to initial.

Syntax

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

Example: This example displays the way the justify-content property works when the property value has been set to inherit.

Syntax

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