Justify Content is a CSS property used in Flexbox to align items horizontally inside a container. It controls how space is distributed between and around items along the main axis.
To use justify content, the container must have display set to flex.
Example
.container {
display: flex;
justify-content: center;
}
This will place all items in the center horizontally.
Common Values of Justify Content
Flex start
Items align to the left side of the container.
.container {
display: flex;
justify-content: flex-start;
}
Flex end
Items align to the right side of the container.
.container {
display: flex;
justify-content: flex-end;
}
Center
Items move to the center of the container.
.container {
display: flex;
justify-content: center;
}
Space between
Items spread out with equal space between them. No space on edges.
.container {
display: flex;
justify-content: space-between;
}
Space around
Items have equal space around them. Space on edges is smaller.
.container {
display: flex;
justify-content: space-around;
}
Space evenly
Items are spaced evenly with equal space on both sides.
.container {
display: flex;
justify-content: space-evenly;
}
Important Notes
Justify content works only with flex or grid containers.
It controls horizontal alignment when flex direction is row.
For vertical alignment, use align items.