Justify Content
Align flex items along the main axis.
Syntax
justify-content: space-between;The justify-content property distributes items along the main axis:
flex-start/flex-end— pack to the start or end.center— center the items.space-between— equal gaps between items.space-around/space-evenly— space around each item.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer uses justify-content: space-between on a navbar to push the logo to the left and the sign-in button to the right.
- A designer uses justify-content: center to horizontally center a group of social media icons in a hero footer strip.
- A developer uses justify-content: space-evenly on a row of pricing cards to distribute them with equal gaps on all sides.
More examples
space-between for navbar layout
Pushes the first child (logo) to the far left and the last child (CTA button) to the far right automatically.
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
height: 60px;
}center for icon strip
Centers a group of social media icons horizontally using justify-content: center with gap for spacing.
.social-links {
display: flex;
justify-content: center;
gap: 20px;
padding: 24px;
}space-around for pricing cards
Distributes fixed-width pricing cards with equal space on both sides of each card using space-around.
.pricing {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
padding: 0 16px;
}
.plan {
flex: 0 0 280px;
}
Discussion