The justify-content Property
The justify-content
property is used to align the flex items
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;
}
The flex-end
value aligns the flex items at the end of the container
.flex-container {
display: flex;
justify-content: flex-end;
}
The center
value aligns the flex items at the center of the container
.flex-container {
display: flex
;justify-content: center;
}
The space-between
value displays the flex items with space between the lines
.flex-container {
display: flex;
justify-content: space-between;
}
The space-around
value displays the flex items with space before, between, and after the lines
.flex-container {
display: flex;
justify-content: space-around;
}