Main Axis Alignment Property
Last updated: 2026-09-13
justify-content Main Axis Alignment Property
The justify-content property sets how flex items are aligned along the main axis and how the space between items and between items and the container edges is distributed. It is the most frequently used alignment property in flexbox and supports left, right, center, space-between, space-around and space-evenly arrangements. The main axis is determined by flex-direction.
| Category | |
|---|---|
| Initial Value | normal |
| Inherited | No |
| Applies To | all |
| Animation Type | discrete |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
justify-content: normal | start | end | flex-start | flex-end | center | left | right | space-between | space-around | space-evenly | stretch;⚙️ Values
| Value | Type | Description |
|---|---|---|
normal | flex-start | flex-end | center | space-between | space-around | space-evenly | Keyword | Main axis alignment |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| justify-content | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| Supported in all major browsers | |||||
Tip： space-between pushes the first and last items flush with the edges and spaces the middle ones evenly; space-around gives every item equal space on both sides, so the edge gaps are half the inner gaps; space-evenly makes all gaps exactly equal.
Important： justify-content acts on the main axis. If flex-direction is column, it controls vertical alignment and you need a defined container height to see any effect.
❓ FAQ
QWhat is the difference between space-between, space-around and space-evenly?
Aspace-between places the first and last items flush with the edges and spaces the middle ones evenly. space-around gives each item equal space on its left and right, so the gaps at the edges are half the gap between two items. space-evenly makes every gap, including the ones at the edges, exactly equal. Pick space-between when the ends should touch the edges and space-evenly when you want the most uniform distribution.
QWhat is the difference between justify-content and text-align: center?
Atext-align: center aligns inline content such as text and inline elements inside a block container; it works at the text level. justify-content: center positions flex items along the main axis; it works at the layout level and also supports distribution modes such as space-between. The two also coexist: a flex container can center its items with justify-content while the text inside each item is still aligned by text-align. Use justify-content for layout and text-align for text.
QWhy doesn’t justify-content: center work?
AThe most common reason is that the container has no leftover space: when the items’ total width equals or exceeds the container width, there is no free space on the main axis to distribute and the centering has nothing to act on. Also, with flex-direction: column you need an explicit height on the container, otherwise the content fills the vertical direction and no space remains. Check the main axis and the container size to find the cause.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
Cross Axis Alignment
Controls how items align on the cross axis
Justify Items
Controls the inline axis alignment of grid items
