CSS is a powerful tool for designing and styling web pages. One of the most important properties in CSS is the justify-content property. This property is used to align and distribute items within a container along the main axis. In this article, we will discuss the justify-content property in detail.
The justify-content property is used to align and distribute items within a container along the main axis. The main axis is the axis that runs in the direction of the container's flex-direction property. The justify-content property is used to control the spacing between the items in the container.
The justify-content property has several values that can be used to align and distribute items within a container. These values include:
flex-start: This value aligns the items to the start of the container.flex-end: This value aligns the items to the end of the container.center: This value centers the items within the container.space-between: This value distributes the items evenly along the main axis, with the first item aligned to the start of the container and the last item aligned to the end of the container.space-around: This value distributes the items evenly along the main axis, with equal space between each item.space-evenly: This value distributes the items evenly along the main axis, with equal space between each item and at the start and end of the container.Let's take a look at some examples of how the justify-content property can be used in CSS:
In this example, we will align the items to the start of the container:
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
.container {
display: flex;
justify-content: flex-start;
}
.item {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
}
In this example, the items are aligned to the start of the container:
In this example, we will align the items to the end of the container:
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
.container {
display: flex;
justify-content: flex-end;
}
.item {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
}
In this example, the items are aligned to the end of the container:
In this example, we will center the items within the container:
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
.container {
display: flex;
justify-content: center;
}
.item {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
}
In this example, the items are centered within the container:
In this example, we will distribute the items evenly along the main axis, with the first item aligned to the start of the container and the last item aligned to the end of the container:
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
.container {
display: flex;
justify-content: space-between;
}
.item {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
}
In this example, the items are distributed evenly along the main axis, with the first item aligned to the start of the container and the last item aligned to the end of the container:
In this example, we will distribute the items evenly along the main axis, with equal space between each item:
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
.container {
display: flex;
justify-content: space-around;
}
.item {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
}
In this example, the items are distributed evenly along the main axis, with equal space between each item:
In this example, we will distribute the items evenly along the main axis, with equal space between each item and at the start and end of the container:
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
.container {
display: flex;
justify-content: space-evenly;
}
.item {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
}
In this example, the items are distributed evenly along the main axis, with equal space between each item and at the start and end of the container:
The justify-content property is a powerful tool for aligning and distributing items within a container along the main axis. By using the different values of this property, you can control the spacing between the items in the container and create a visually appealing layout for your web page.