CSS justify-content Property
The justify-content property in CSS is used to align the flexible box container’s items along the main axis of a flex container. This property manages the distribution of space between and around content items in a flex container.
Note: This property does not align items along the vertical axis. For vertical alignment, 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: Default value. Aligns flex items at the start of the container.
- flex-end: Aligns flex items at the end of the container.
- center: Aligns flex items at the center of the container.
- space-between: Distributes items evenly with the first item at the start and the last item at the end.
- space-around: Distributes items with equal spacing before, between, and after each item.
- space-evenly: Distributes items with equal spacing between them, but the spacing from the corners is equal.
- initial: Sets the property to its default value.
- inherit: Inherits the value from its parent element.
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>w3wiki</p>
</div>
<div>2
<p>w3wiki</p>
</div>
<div>3
<p>w3wiki</p>
</div>
<div>4
<p>w3wiki</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>w3wiki</p>
</div>
<div>2
<p>w3wiki</p>
</div>
<div>3
<p>w3wiki</p>
</div>
<div>4
<p>w3wiki</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>w3wiki</p>
</div>
<div>2
<p>w3wiki</p>
</div>
<div>3
<p>w3wiki</p>
</div>
<div>4
<p>w3wiki</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>w3wiki</p>
</div>
<div>2
<p>w3wiki</p>
</div>
<div>3
<p>w3wiki</p>
</div>
<div>4
<p>w3wiki</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>w3wiki</p>
</div>
<div>2
<p>w3wiki</p>
</div>
<div>3
<p>w3wiki</p>
</div>
<div>4
<p>w3wiki</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>w3wiki</p>
</div>
<div>2
<p>w3wiki</p>
</div>
<div>3
<p>w3wiki</p>
</div>
<div>4
<p>w3wiki</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>w3wiki</p>
</div>
<div>2
<p>w3wiki</p>
</div>
<div>3
<p>w3wiki</p>
</div>
<div>4
<p>w3wiki</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>w3wiki</p>
</div>
<div>2
<p>w3wiki</p>
</div>
<div>3
<p>w3wiki</p>
</div>
<div>4
<p>w3wiki</p>
</div>
</div>
</body>
</html>
Output:
The justify-content property is an essential for managing the alignment and distribution of items within a flex container along the main axis. Understanding and effectively utilizing this property allows developers to create flexible, responsive layouts that enhance the overall user experience. For vertical alignment, remember to use the align-items property in conjunction with justify-content.
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
Contact Us