justify-content
The justify-content property distributes free space along the main axis of a flex or grid container.
Syntax
justify-content: flex-start | center | space-between | space-around | space-evenly;
Examples
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}
Output
Pushes the first and last nav items to the edges with equal gaps distributed between the middle items.
Notes
Acts on the main axis (the row in flex-direction:row). space-between has no outer gaps; space-evenly makes all gaps equal including the ends. In grid it aligns the whole grid track group.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 29 |
| firefox | 28 |
| safari | 9.0 |
| edge | 12 |