CSS Justify Content
Justify Content: These properties are applied for the alignment of items of a flexible box container if any item does not cover every available space over the main-axis, i.e., horizontally. Justify content property specifies how a browser classifies the area everywhere and between any content item.
It is not used to define items or containers inside any vertical axis. We can apply the property, i.e., align-items, for the alignment of the items vertically.
Syntax:
justify-content: center | flex-start | flex-end | space-around | space-evenly | space-between | initial | inherit;
The flex-start value is used as a default value. Take a look at the following description:
| Values | Description |
| center | As the name suggests, it set-up an item’s position in the starting of a container. |
| flex-start | It is used as a default value and places an item at the starting of a container. |
| flex-end | This value is applied to set an item’s position at a container’s end. |
| space-around | These are applied to position any item along with parallel spacing to each other. The space-around value evenly classifies several items inside the line with the same space about them. |
| space-between | By using this value, an item is spaced evenly. Here, any first item (element) is at a starting, and any last item (element) is at an end. |
| space-evenly | It places the items along with a parallel space. Although, the spacing about all the corners varies. |
Take a look on the following illustration of these property values:
Example:
<!DOCTYPE html>
<html>
<head>
<title>Justify Content in CSS </title>
<style>
#flexstart
{
display: flex;
justify-content: flex-start;
}
#flexend
{
display: flex;
justify-content: flex-end;
}
#cent
{
display: flex;
justify-content: center;
}
#evenly
{
display: flex;
justify-content: space-evenly;
}
#around
{
display: flex;
justify-content: space-around;
}
#between
{
display: flex;
justify-content: space-between;
}
.flex-item
{
width: 50px;
height: 50px;
margin: 5px;
padding: 5px;
color: black;
font-size: 2em;
font-weight: bold;
text-align: center;
border: 1px solid black;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="flexstart">
<h1>flex-start</h1>
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
</div>
<div id="flexend">
<h1>flex-end</h1>
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
</div>
<div id="cent">
<h1>center</h1>
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
</div>
<h1>space-evenly</h1>
<div id="evenly">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
</div>
<h1>space-around</h1>
<div id="around">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
</div>
<h1>space-between</h1>
<div id="between">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
</div>
</body>
</html>
Output:
