justify-content
Specifies how flex items are aligned along the main axis of the flex container. Controls how space is distributed between and around items.
Sample Code
/* Align to the start (default) */
.container { display: flex; justify-content: flex-start;}
/* Align to the center */
.container-center { display: flex; justify-content: center;}
/* Align to the end */
.container-end { display: flex; justify-content: flex-end;}
/* Space between items (no space at edges) */
.container-between { display: flex; justify-content: space-between;}
/* Equal space around each item */
.container-around { display: flex; justify-content: space-around;}
/* Equal space between all items including edges */
.container-evenly { display: flex; justify-content: space-evenly;}
Available Values
| Value | Description |
|---|---|
| flex-start | Packs items toward the start of the main axis. This is the initial value. |
| flex-end | Packs items toward the end of the main axis. |
| center | Centers items along the main axis. |
| space-between | Places the first item at the start and the last at the end, distributing remaining items evenly in between. |
| space-around | Distributes items with equal space on each side. The space between items is twice the space at the edges. |
| space-evenly | Distributes items so that the space between every pair of items, and between items and the container edges, is equal. |
Specification
| Item | Details |
|---|---|
| Initial value | flex-start |
| Applies to | Flex containers (elements with 'display: flex' or 'display: inline-flex') |
| Inherited | No |
| Animation | Not animatable (discrete) |
Browser Compatibility
Chrome29+ ○
28 △27 △26 △25 △24 △23 △22 △21 △20 and earlier ×
Firefox20+ ○
19 and earlier ×
Safari9+ ○8 △
7 △6 and earlier ×
Edge12+ ○
IE11 ○10 ×9 ×
8 ×7 ×
6 ×
Opera12.1+ ○
11 and earlier ×
iOS Safari9+ ○8 △7 △6 and earlier ×
Android Browser4.4+ ○3 and earlier × Chrome AndroidLatest ○ Firefox AndroidLatest ○Details
'justify-content' is one of the most frequently used Flexbox properties. It controls how items are positioned along the main axis — horizontally when 'flex-direction: row', or vertically when 'flex-direction: column'.
Visual Layout of Each Value
flex-start (default)
Items are packed toward the start of the main axis. With 'flex-direction: row', this means left-aligned; with 'column', it means top-aligned. Since this is the initial value, you don't need to explicitly set it.
center
Centers all items along the main axis. Frequently used for centering navigation menus or elements. Combine with 'align-items: center' to achieve perfect horizontal and vertical centering.
/* Perfect horizontal and vertical centering */
.center-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
space-between
The first item is placed at the start and the last item at the end of the container. Remaining items are evenly distributed in between. This is ideal for placing a logo on the left and navigation on the right in a header.
/* Logo on left, navigation on right */
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
Difference between space-around and space-evenly
'space-around' places equal space on each side of every item, so the gap between items is twice the gap at the edges. 'space-evenly' makes all gaps — including the edges — completely equal.
Note for 'flex-direction: column'
When using 'justify-content' with 'flex-direction: column', the container must have an explicit 'height'. Without a height, the container shrinks to fit its content and there is no space to distribute.
/* NG: no height, so center has no effect */
.ng {
display: flex;
flex-direction: column;
justify-content: center;
}
/* OK: specifying height makes it work */
.ok {
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
}
Related Properties
| Property | Description |
|---|---|
| align-items | Controls item alignment along the cross axis. Combine with 'justify-content' to specify both horizontal and vertical alignment. |
| align-content | Controls the spacing between multiple rows of items. It is the cross-axis equivalent of 'justify-content'. |
| flex-direction | Specifies the direction of the main axis. The axis that 'justify-content' affects depends on this property's value. |
| gap | Directly sets the gap between items with a fixed value, instead of auto-distributing space like 'space-between'. |
If you find any errors or copyright issues, please contact us.
シェアする