The justify-content property in CSS is used to align flexible box container items along the main axis of a flex container. This property essentially manages how extra space is distributed between and around content items in a Flexbox layout.
Note: This property aligns items strictly along the main axis (which is horizontal by default). It does not align items along the cross axis (vertical by default). For cross-axis alignment, you use the
align-itemsproperty.
For justify-content to have an effect, there must be available space in the container. If your flex items have properties like flex-grow set to consume all available space, this property will not visually change their spacing.
Syntax:
.flex-container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | initial | inherit;
}
Here are the different property values used in CSS flexbox alignment, along with their descriptions:
| Value | Description |
|---|---|
flex-start |
(Default) Aligns flex items at the start of the container. |
flex-end |
Aligns flex items at the end of the container. |
center |
Aligns flex items precisely 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 around each item (before, between, and after). |
space-evenly |
Distributes items with exactly equal spacing between them and the edges of the container. |
initial |
Sets the property to its default value. |
inherit |
Inherits the value from its parent element. |
Below is a detailed explanation of each property, including interactive examples so you can see exactly how the items behave.
The flex-start value is the default behavior. It aligns flex items at the start of the container, positioning them clustered together on the left side (or top, if the flex direction is a column).
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: flex-start;
border: 2px solid navy;
background-color: #f4f4f9;
padding: 10px;
}
.item {
width: 80px;
height: 80px;
background-color: lightblue;
border: 2px solid navy;
margin-right: 5px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: navy;
}
</style>
</head>
<body>
<h4>justify-content: flex-start;</h4>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
The flex-end value aligns flex items at the end of the container, packing them tightly to the right side.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: flex-end;
border: 2px solid navy;
background-color: #f4f4f9;
padding: 10px;
}
.item {
width: 80px; height: 80px;
background-color: lightblue;
border: 2px solid navy;
margin-left: 5px; /* Margin adjusted for visual spacing */
display: flex; align-items: center; justify-content: center;
font-weight: bold; color: navy;
}
</style>
</head>
<body>
<h4>justify-content: flex-end;</h4>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
The center value aligns flex items directly in the middle of the container, keeping them clustered but placing an equal amount of empty space on the left and right sides.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
border: 2px solid navy;
background-color: #f4f4f9;
padding: 10px;
}
.item {
width: 80px; height: 80px;
background-color: lightblue; border: 2px solid navy;
margin: 0 5px;
display: flex; align-items: center; justify-content: center;
font-weight: bold; color: navy;
}
</style>
</head>
<body>
<h4>justify-content: center;</h4>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
The space-between value is highly popular for layout structures like navigation bars. It pushes the first item perfectly to the start edge, the last item perfectly to the end edge, and evenly distributes the remaining space between the middle items.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: space-between;
border: 2px solid navy;
background-color: #f4f4f9;
padding: 10px;
}
.item {
width: 80px; height: 80px;
background-color: lightblue; border: 2px solid navy;
display: flex; align-items: center; justify-content: center;
font-weight: bold; color: navy;
}
</style>
</head>
<body>
<h4>justify-content: space-between;</h4>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
The space-around value distributes flex items with an equal amount of space around each individual item. This means the gap between two items is twice as large as the gap between an item and the edge of the container.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: space-around;
border: 2px solid navy;
background-color: #f4f4f9;
padding: 10px;
}
.item {
width: 80px; height: 80px;
background-color: lightblue; border: 2px solid navy;
display: flex; align-items: center; justify-content: center;
font-weight: bold; color: navy;
}
</style>
</head>
<body>
<h4>justify-content: space-around;</h4>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
The space-evenly value guarantees that the empty space between any two items—and the space between the items and the edges—is exactly the same.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: space-evenly;
border: 2px solid navy;
background-color: #f4f4f9;
padding: 10px;
}
.item {
width: 80px; height: 80px;
background-color: lightblue; border: 2px solid navy;
display: flex; align-items: center; justify-content: center;
font-weight: bold; color: navy;
}
</style>
</head>
<body>
<h4>justify-content: space-evenly;</h4>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
Flexbox and the justify-content property are highly reliable in modern web development. The supported browsers are listed below:
Which value of justify-content pushes the first item completely to the left and the last item completely to the right, distributing the remaining items evenly in the middle?