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.<\/p>\n\n\n\n
To use justify content, the container must have display set to flex.<\/p>\n\n\n\n
Example<\/p>\n\n\n\n
.container {
display: flex;
justify-content: center;
}<\/p>\n\n\n\n
This will place all items in the center horizontally.<\/p>\n\n\n\n
Common Values of Justify Content<\/p>\n\n\n\n
Flex start
Items align to the left side of the container.<\/p>\n\n\n\n
.container {
display: flex;
justify-content: flex-start;
}<\/p>\n\n\n\n
Flex end
Items align to the right side of the container.<\/p>\n\n\n\n
.container {
display: flex;
justify-content: flex-end;
}<\/p>\n\n\n\n
Center
Items move to the center of the container.<\/p>\n\n\n\n
.container {
display: flex;
justify-content: center;
}<\/p>\n\n\n\n
Space between
Items spread out with equal space between them. No space on edges.<\/p>\n\n\n\n
.container {
display: flex;
justify-content: space-between;
}<\/p>\n\n\n\n
Space around
Items have equal space around them. Space on edges is smaller.<\/p>\n\n\n\n
.container {
display: flex;
justify-content: space-around;
}<\/p>\n\n\n\n
Space evenly
Items are spaced evenly with equal space on both sides.<\/p>\n\n\n\n
.container {
display: flex;
justify-content: space-evenly;
}<\/p>\n\n\n\n
Important Notes<\/p>\n\n\n\n
Justify content works only with flex or grid containers.
It controls horizontal alignment when flex direction is row.
For vertical alignment, use align items.<\/p>\n\n\n\n
<\/p>\n","protected":false},"menu_order":0,"template":"","class_list":["post-115","lesson","type-lesson","status-publish","hentry"],"yoast_head":"\n