What does justify-content mean in CSS
What does justify-content mean in CSS?
In CSS, justify-content specifies the alignment of child elements within a container along the main axis. In Flexbox layouts, the main axis is typically horizontal (left to right) or vertical (top to bottom). The justify-content property controls the alignment of child elements in this direction.
Optional Values
justify-content has multiple optional values, each corresponding to a different alignment method. The following are common values:
flex-start: Items are aligned at the start of the container.flex-end: Items are aligned at the end of the container.center: Items are aligned in the center of the container.space-between: Items are evenly distributed within the container, with the first item at the start and the last item at the end.space-around: Items are evenly distributed within the container, with equal spacing on both sides.space-evenly: Items are evenly distributed within the container, with equal spacing between all items.
How to Use
To use the justify-content property, you must first set the container’s display property to flex or inline-flex to apply Flexbox layout.
Here is a simple example showing how to use the justify-content attribute:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Justify Content Example</title>
<style>
.container {
display: flex;
justify-content: space-around;
height: 200px;
background-color: lightblue;
}
.item {
width: 50px;
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div> </div>
</body>
</html>
In this example, we create a parent container, .container, which contains three child elements, .item. By setting justify-content: space-around;, we evenly distribute the child elements within the container, leaving equal spacing on both sides.
Running Results
You can open the above code in your browser to see the effect. You will see that the three pink squares are evenly distributed within the blue container.
Using the justify-content property, we can control the alignment of child elements within the container, making our layout more flexible and beautiful.