CSS
justify-content
property defines how the browser distributes space between and around content items along the
main-axis
of a flex container, and the inline axis of a grid container.
The interactive example below demonstrates some of the values using Grid Layout.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
The alignment is done after the lengths and auto margins are applied, meaning that, if in a
Flexbox layout
there is at least one flexible element, with
flex-grow
different from
0
, it will have no effect as there won't be any available space.
/* Positional alignment */
justify-content: center; /* Pack items around the center */
justify-content: start; /* Pack items from the start */
justify-content: end; /* Pack items from the end */
justify-content: flex-start; /* Pack flex items from the start */
justify-content: flex-end; /* Pack flex items from the end */
justify-content: left; /* Pack items from the left */
justify-content: right; /* Pack items from the right */
/* Baseline alignment */
/* justify-content does not take baseline values */
/* Normal alignment */
justify-content: normal;
/* Distributed alignment */
justify-content: space-between; /* Distribute items evenly
The first item is flush with the start,
the last is flush with the end */
justify-content: space-around; /* Distribute items evenly
Items have a half-size space
on either end */
justify-content: space-evenly; /* Distribute items evenly
Items have equal space around them */
justify-content: stretch; /* Distribute items evenly
Stretch 'auto'-sized items to fit
the container */
/* Overflow alignment */
justify-content: safe center;
justify-content: unsafe center;
/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: unset;
start
The items are packed flush to each other toward the start edge of the alignment container in the main axis.
end
The items are packed flush to each other toward the end edge of the alignment container in the main axis.
flex-start
start
.
flex-end
end
.
center
The items are packed flush to each other toward the center of the alignment container along the main axis.
left
start
.
right
start
.
normal
justify-content
value was set. This value behaves as
stretch
in grid and flex containers.
baseline
first baseline
last baseline
first baseline
is
start
, the one for
last baseline
is
end
.
space-between
The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.
space-around
The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items.
space-evenly
The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.
stretch
If the combined size of the items along the main axis is less than the size of the alignment container, any
auto
-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by
max-height
/
max-width
(or equivalent functionality), so that the combined size exactly fills the alignment container along the main axis.
注意：
stretch
is not supported by flexible boxes (flexbox).
safe
start
.
unsafe
Used alongside an alignment keyword. Regardless of the relative sizes of the item and alignment container, and regardless of whether overflow which causes data loss might happen, the given alignment value is honored.
| 初始值 |
normal
|
|---|---|
| 适用于 | flex containers |
| 继承 | no |
| 计算值 | 如指定 |
| 动画类型 | discrete |
normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]where
<content-distribution> = space-between | space-around | space-evenly | stretch
<overflow-position> = unsafe | safe
<content-position> = center | start | end | flex-start | flex-end
#container {
display: flex;
justify-content: space-between; /* Can be changed in the live sample */
}
#container > div {
width: 100px;
height: 100px;
background: linear-gradient(-45deg, #788cff, #b4c8ff);
}
<div id="container"> <div></div> <div></div> <div></div> </div> <select id="justifyContent"> <option value="start">start</option> <option value="end">end</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="center">center</option> <option value="left">left</option> <option value="right">right</option> <option value="baseline">baseline</option> <option value="first baseline">first baseline</option> <option value="last baseline">last baseline</option> <option value="space-between" selected>space-between</option> <option value="space-around">space-around</option> <option value="space-evenly">space-evenly</option> <option value="stretch">stretch</option> </select>
var justifyContent = document.getElementById("justifyContent");
justifyContent.addEventListener("change", function (evt) {
document.getElementById("container").style.justifyContent =
evt.target.value;
});
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Box Alignment Module Level 3
The definition of 'justify-content' in that specification. |
工作草案 | Adds the [ first | last ]? baseline, self-start, self-end, start, end, left, right, unsafe | safe values. |
|
CSS Flexible Box Layout Module
The definition of 'justify-content' in that specification. |
候选推荐 | 初始定义 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Supported in Flex Layout |
Chrome
完整支持
52
|
Edge 完整支持 12 |
Firefox
完整支持
20
注意事项
|
IE 完整支持 11 | Opera 完整支持 12.1 | Safari 完整支持 9 |
WebView Android
完整支持
52
|
Chrome Android
完整支持
52
|
Firefox Android
完整支持
20
注意事项
|
Opera Android 完整支持 12.1 | Safari iOS 完整支持 9 |
Samsung Internet Android
完整支持
6.0
|
baseline
|
Chrome 完整支持 57 | Edge 完整支持 79 |
Firefox
不支持
45 — 60
注意事项
|
IE 不支持 No | Opera 完整支持 44 | Safari 不支持 No | WebView Android 完整支持 57 | Chrome Android 完整支持 57 |
Firefox Android
不支持
45 — 60
注意事项
|
Opera Android 完整支持 43 | Safari iOS 不支持 No | Samsung Internet Android 完整支持 7.0 |
first baseline
and
last baseline
|
Chrome 不支持 No | Edge 不支持 No |
Firefox
不支持
52 — 60
注意事项
|
IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No |
Firefox Android
不支持
52 — 60
注意事项
|
Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
left
and
right
|
Chrome
不支持
No
注意事项
|
Edge
不支持
No
注意事项
|
Firefox 完整支持 52 |
IE
不支持
No
注意事项
|
Opera
不支持
No
注意事项
|
Safari 完整支持 9 |
WebView Android
不支持
No
注意事项
|
Chrome Android
不支持
No
注意事项
|
Firefox Android 完整支持 52 |
Opera Android
不支持
No
注意事项
|
Safari iOS 完整支持 9 |
Samsung Internet Android
不支持
No
注意事项
|
safe
and
unsafe
|
Chrome
不支持
No
注意事项
|
Edge
不支持
No
注意事项
|
Firefox 完整支持 63 | IE 不支持 No |
Opera
不支持
No
注意事项
|
Safari
不支持
No
注意事项
|
WebView Android
不支持
No
注意事项
|
Chrome Android
不支持
No
注意事项
|
Firefox Android 完整支持 63 |
Opera Android
不支持
No
注意事项
|
Safari iOS
不支持
No
注意事项
|
Samsung Internet Android
不支持
No
注意事项
|
space-evenly
|
Chrome 完整支持 60 | Edge 完整支持 79 | Firefox 完整支持 52 | IE 不支持 No | Opera 完整支持 47 | Safari 完整支持 11 | WebView Android 完整支持 60 | Chrome Android 完整支持 60 | Firefox Android 完整支持 52 | Opera Android 完整支持 44 | Safari iOS 完整支持 11 | Samsung Internet Android 完整支持 8.0 |
start
and
end
|
Chrome
不支持
No
注意事项
|
Edge
不支持
No
注意事项
|
Firefox 完整支持 45 | IE 不支持 No |
Opera
不支持
No
注意事项
|
Safari 完整支持 9 |
WebView Android
不支持
No
注意事项
|
Chrome Android
不支持
No
注意事项
|
Firefox Android 完整支持 45 |
Opera Android
不支持
No
注意事项
|
Safari iOS 完整支持 9 |
Samsung Internet Android
不支持
No
注意事项
|
stretch
|
Chrome 完整支持 57 | Edge 完整支持 79 | Firefox 完整支持 52 | IE 不支持 No | Opera 完整支持 44 | Safari 完整支持 9 | WebView Android 完整支持 57 | Chrome Android 完整支持 57 | Firefox Android 完整支持 52 | Opera Android 完整支持 43 | Safari iOS 完整支持 9 | Samsung Internet Android 完整支持 7.0 |
完整支持
不支持
见实现注意事项。
用户必须明确启用此特征。
要求使用供应商前缀或不同名称。
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Supported in Grid Layout | Chrome 完整支持 57 | Edge 完整支持 16 | Firefox 完整支持 52 | IE 不支持 No | Opera 完整支持 44 | Safari 完整支持 10.1 | WebView Android 完整支持 57 | Chrome Android 完整支持 52 | Firefox Android 完整支持 52 | Opera Android 完整支持 43 | Safari iOS 完整支持 10.3 | Samsung Internet Android 完整支持 6.2 |
完整支持
不支持