flex-start, the default, packs items toward the start of the main axis, flex-end packs them toward the end, and center centers them as a group — space-between distributes items with equal space between them but none at the outer edges, space-around gives each item equal space on both sides, making edge gaps effectively half the size of between-item gaps, and space-evenly distributes truly equal space everywhere, including the outer edges. justify-content only has a visible effect when there's genuinely leftover space along the main axis after accounting for all items' sizes — if items already fill the container completely, or overflow it, justify-content has nothing meaningful left to distribute.
1Understanding Justify-content
flex-start, the default, packs items toward the start of the main axis, flex-end packs them toward the end, and center centers them as a group — space-between distributes items with equal space between them but none at the outer edges, space-around gives each item equal space on both sides, making edge gaps effectively half the size of between-item gaps, and space-evenly distributes truly equal space everywhere, including the outer edges. justify-content only has a visible effect when there's genuinely leftover space along the main axis after accounting for all items' sizes — if items already fill the container completely, or overflow it, justify-content has nothing meaningful left to distribute.
justify-content only produces a visible effect when flex items don't already fill the entire main axis — if the items' combined size equals or exceeds the container's size, there's no leftover space left for justify-content to actually distribute.
.navbar {
display: flex;
justify-content: space-between;
}2Practical Example
Here is a real-world application of Justify-content showing how it is used in production CSS code.
.button-group {
display: flex;
justify-content: center;
}3Best Practices
Follow these guidelines when working with Justify-content:
1. Use space-between for evenly-spaced navigation items or similar layouts where edge items should sit flush against the container's boundaries
2. Use space-evenly instead of space-around when you specifically want the outer edge gaps to visually match the between-item gaps exactly, rather than being half their size
3. Remember justify-content has no visible effect if flex items already collectively fill, or overflow, the container's main axis, since there's no leftover space to distribute
Tip: justify-content only produces a visible effect when flex items don't already fill the entire main axis — if the items' combined size equals or exceeds the container's size, there's no leftover space left for justify-content to actually distribute.
.navbar {
display: flex;
justify-content: space-between;
}