CSS justify-content Property
The justify-content property defines how the browser distributes space between and around content items along the main axis of a flex or grid container.
Description & Usage
The justify-content property controls alignment along the main axis of a flex container (or inline axis of a grid container). It manages remaining free space when flex items do not fill the entire container.
Common values like space-between automatically push the first item to the start edge and the last item to the end edge, perfectly distributing remaining space between remaining items. This makes building header navigation bars effortless.
Values like center and space-evenly provide seamless horizontal centering and uniform item padding across modern web component layouts.
Property Specifications
| Property Feature | Specification |
|---|---|
| Category | Flexbox |
| Initial Value | flex-start |
| Inherited | No (not inherited) |
| Applies To | Flex and Grid containers |
Syntax
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;Property Values
| Value | Description |
|---|---|
| flex-start | Items are packed toward start line of main axis. |
| center | Items are centered along main axis. |
| flex-end | Items are packed toward end line of main axis. |
| space-between | First item at start, last item at end, remaining space evenly distributed between items. |
| space-around | Items are evenly distributed with equal space around each item. |
| space-evenly | Items are distributed so spacing between any two items (and edges) is equal. |
Code Examples
Navbar Layout with Logo & Nav Links
.header-nav {
display: flex;
justify-content: space-between;
align-items: center;
}
Pushes logo to far left and navigation links to far right.