CSS Flexbox justify-content
The justify-content property aligns flex items along the main axis (horizontally).
CSS justify-content Property
The justify-content property is used to
align the flex items when they do not use all available space on the main-axis (horizontally).
This property can have one of the following values:
centerflex-start(default)flex-endspace-aroundspace-betweenspace-evenly
Example
The center value aligns the flex items in the center of the container:
.flex-container {
display: flex;
justify-content: center;
}
Result:
Example
The flex-start value aligns the flex items at the beginning of the container
(this is default):
.flex-container {
display: flex;
justify-content: flex-start;
}
Result:
Example
The flex-end value aligns the flex items at the end of the container:
.flex-container {
display: flex;
justify-content: flex-end;
}
Result:
Example
The space-around value displays the flex items with space
before, between, and after the lines:
.flex-container {
display: flex;
justify-content: space-around;
}
Result:
Example
The space-between value displays the flex items with space
between the lines:
.flex-container {
display: flex;
justify-content: space-between;
}
Result:
Example
The space-evenly value displays the flex items with equal space around them:
.flex-container {
display: flex;
justify-content: space-evenly;
}
Result:
