The justify-content property in CSS is used within a flex container to align and distribute space among its flex items along the main axis (the direction in which the flex items are laid out). It helps control how the extra space is distributed when the items do not fill the container.
Here are the common values for justify-content:
- flex-start: Aligns items to the start of the flex container (default).
- flex-end: Aligns items to the end of the flex container.
- center: Centers items within the flex container.
- space-between: Distributes items evenly, with the first item at the start and the last item at the end, leaving equal space between the items.
- space-around: Distributes items evenly, with equal space around them. The space before the first item and after the last item is half the space between items.
- space-evenly: Distributes items evenly, with equal space between all items, including before the first and after the last item.
Here’s an example of how to use justify-content in CSS:
.flex-container {
display: flex;
justify-content: space-between; /* Change this value to flex-start, flex-end, center, space-around, or space-evenly as needed */
}In this example, the flex items within the .flex-container will be distributed with equal space between them due to the justify-content: space-between; property.
