/* Items based at the center of the parent container: */
div {
display: flex;
justify-content: center;
}
/* Items based at the upper-left side of the parent container: */
div {
display: flex;
justify-content: flex-start;
}/* Positional alignment */
justify-content: center; /* Pack items around the center */
justify-content: start; /* Pack items from the start */
justify-content: end; /* Pack items from the end */
justify-content: flex-start; /* Pack flex items from the start */
justify-content: flex-end; /* Pack flex items from the end */
justify-content: left; /* Pack items from the left */
justify-content: right; /* Pack items from the right */
/* Baseline alignment */
/* justify-content does not take baseline values */
/* Normal alignment */
justify-content: normal;
/* Distributed alignment */
justify-content: space-between; /* Distribute items evenly
The first item is flush with the start,
the last is flush with the end */
justify-content: space-around; /* Distribute items evenly
Items have a half-size space
on either end */
justify-content: space-evenly; /* Distribute items evenly
Items have equal space around them */
justify-content: stretch; /* Distribute items evenly
Stretch 'auto'-sized items to fit
the container */
/* Overflow alignment */
justify-content: safe center;
justify-content: unsafe center;
/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: unset;
Diffrient types of justify-content properties in CSS:
1)normal : "Normal-alignment."
2)space-between : "Distribute items evenly The first item is flush with the
"start,the last is flush with the end."
3)space-around : "Distribute items evenly Items have a half-size space.
4)space-evenly : "Distribute items evenly Items have equal space around them.
5)stretch : "Distribute items evenly Stretch 'auto'-sized items to fit.
6)center : "Pack items around the center
7)flex-start : "Pack flex items from the start
8)flex-end : "Pack flex items from the end
9)more... ('upvote please!')1)justify-content determine how remaining space in the container will be
distributed around the flex elements if there is any remaining space
in the container main axis.
2)justify-content accepts 5 values =>
flex-start=> default,
flex-end,center,space-between,space-around.
.flex-container {
display:flex;
flex-direction:row;
justify-content:space-between;
}
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container{
display: flex;
justify-content: center;
background: coral;
}
.flex-item{
width: 100px;
height: 100px;
margin: 10px;
text-align: center;
line-height: 100px;
font-size: 25px;
background: white;
}
</style>
</head>
<body>
<h1>CSS justify-content Property</h1>
<h2>justify-content: center</h2>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<p><b>Note: </b>Notice that the flex items are aligned in the center of the flex container.</p>
</body>
</html>