The justify-content property in CSS is used to align and distribute flex items along the main axis of a flex container. It allows you to control how the extra space in a flex container is distributed between the flex items.
The justify-content property accepts several values that allow you to align and distribute items in different ways:
flex-start
The flex-start value aligns the flex items at the beginning of the main axis. This is the default value.
.container {
display: flex;
justify-content: flex-start;
}
flex-end
The flex-end value aligns the flex items at the end of the main axis.
.container {
display: flex;
justify-content: flex-end;
}
center
The center value centers the flex items along the main axis.
.container {
display: flex;
justify-content: center;
}
space-between
The space-between value distributes the flex items evenly along the main axis, with equal space between the items.
.container {
display: flex;
justify-content: space-between;
}
space-around
The space-around value distributes the flex items evenly along the main axis, with equal space between the items and at the beginning and end of the container.
.container {
display: flex;
justify-content: space-around;
}
space-evenly
The space-evenly value distributes the flex items evenly along the main axis, with equal space between the items and at the beginning and end of the container.
.container {
display: flex;
justify-content: space-evenly;
}
stretch
The stretch value stretches the flex items to fill the container along the main axis. This is the default behavior when the align-items property is set to stretch.
.container {
display: flex;
justify-content: stretch;
}
It’s important to note that the justify-content property only works on flex containers, not on block-level or inline-level elements.
You can also use the justify-content property in combination with other flex properties to achieve more complex layouts. For example, you can use flex-wrap to create a multi-line layout, and then use justify-content to control the alignment and distribution of the items on each line.
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
In conclusion, the justify-content property is a powerful tool for controlling the alignment and distribution of flex items along the main axis of a flex container. By using the different values of this property, you can create a wide range of layouts and designs.