CSS
align-content
property sets the distribution of space between and around content items along a
flexbox
's cross-axis or a
grid
's block axis.
The interactive example below use Grid Layout to demonstrate some of the values of this property.
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.
This property has no effect on single line flex containers (i.e. ones with
flex-wrap: nowrap
).
/* Basic positional alignment */
/* align-content does not take left and right values */
align-content: center; /* Pack items around the center */
align-content: start; /* Pack items from the start */
align-content: end; /* Pack items from the end */
align-content: flex-start; /* Pack flex items from the start */
align-content: flex-end; /* Pack flex items from the end */
/* Normal alignment */
align-content: normal;
/* Baseline alignment */
align-content: baseline;
align-content: first baseline;
align-content: last baseline;
/* Distributed alignment */
align-content: space-between; /* Distribute items evenly
The first item is flush with the start,
the last is flush with the end */
align-content: space-around; /* Distribute items evenly
Items have a half-size space
on either end */
align-content: space-evenly; /* Distribute items evenly
Items have equal space around them */
align-content: stretch; /* Distribute items evenly
Stretch 'auto'-sized items to fit
the container */
/* Overflow alignment */
align-content: safe center;
align-content: unsafe center;
/* Global values */
align-content: inherit;
align-content: initial;
align-content: unset;
start
The items are packed flush to each other against the start edge of the alignment container in the cross axis.
end
The items are packed flush to each other against the end edge of the alignment container in the cross axis.
flex-start
start
.
flex-end
end
.
center
The items are packed flush to each other in the center of the alignment container along the cross axis.
normal
align-content
value was set.
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 cross axis. The spacing between each pair of adjacent items is the same. The first item is flush with the start edge of the alignment container in the cross axis, and the last item is flush with the end edge of the alignment container in the cross axis.
space-around
The items are evenly distributed within the alignment container along the cross 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 cross axis. The spacing between each pair of adjacent items, the start edge and the first item, and the end edge and the last item, are all exactly the same.
stretch
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 cross axis.
safe
start
.
unsafe
Used alongside an alignment keyword. Regardless of the relative sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored.
| 初始值 |
normal
|
|---|---|
| 适用于 | multi-line flex containers |
| 继承 | no |
| 计算值 | 如指定 |
| 动画类型 | discrete |
normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>where
<baseline-position> = [ first | last ]? baseline
<content-distribution> = space-between | space-around | space-evenly | stretch
<overflow-position> = unsafe | safe
<content-position> = center | start | end | flex-start | flex-end
#container {
height:200px;
width: 240px;
align-content: center; /* Can be changed in the live sample */
background-color: #8c8c8c;
}
.flex {
display: flex;
flex-wrap: wrap;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, 50px);
}
div > div {
box-sizing: border-box;
border: 2px solid #8c8c8c;
width: 50px;
display: flex;
align-items: center;
justify-content: center;
}
#item1 {
background-color: #8cffa0;
min-height: 30px;
}
#item2 {
background-color: #a0c8ff;
min-height: 50px;
}
#item3 {
background-color: #ffa08c;
min-height: 40px;
}
#item4 {
background-color: #ffff8c;
min-height: 60px;
}
#item5 {
background-color: #ff8cff;
min-height: 70px;
}
#item6 {
background-color: #8cffff;
min-height: 50px;
font-size: 30px;
}
select {
font-size: 16px;
}
.row {
margin-top: 10px;
}
<div id="container" class="flex">
<div id="item1">1</div>
<div id="item2">2</div>
<div id="item3">3</div>
<div id="item4">4</div>
<div id="item5">5</div>
<div id="item6">6</div>
</div>
<div class="row">
<label for="display">display: </label>
<select id="display">
<option value="flex">flex</option>
<option value="grid">grid</option>
</select>
</div>
<div class="row">
<label for="values">align-content: </label>
<select id="values">
<option value="normal">normal</option>
<option value="stretch">stretch</option>
<option value="flex-start">flex-start</option>
<option value="flex-end">flex-end</option>
<option value="center" selected>center</option>
<option value="space-between">space-between</option>
<option value="space-around">space-around</option>
<option value="space-evenly">space-evenly</option>
<option value="start">start</option>
<option value="end">end</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="safe center">safe center</option>
<option value="unsafe center">unsafe center</option>
<option value="safe right">safe right</option>
<option value="unsafe right">unsafe right</option>
<option value="safe end">safe end</option>
<option value="unsafe end">unsafe end</option>
<option value="safe flex-end">safe flex-end</option>
<option value="unsafe flex-end">unsafe flex-end</option>
</select>
</div>
var values = document.getElementById('values');
var display = document.getElementById('display');
var container = document.getElementById('container');
values.addEventListener('change', function (evt) {
container.style.alignContent = evt.target.value;
});
display.addEventListener('change', function (evt) {
container.className = evt.target.value;
});
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Box Alignment Module Level 3
The definition of 'align-content' in that specification. |
工作草案 | Adds the [ first | last ]? baseline, start, end, left, right, unsafe | safe values. |
|
CSS Flexible Box Layout Module
The definition of 'align-content' in that specification. |
候选推荐 | 初始定义 |
| 初始值 |
normal
|
|---|---|
| 适用于 | multi-line flex containers |
| 继承 | no |
| 计算值 | 如指定 |
| 动画类型 | discrete |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Supported in Flex Layout | Chrome 完整支持 29 | Edge 完整支持 12 |
Firefox
完整支持
28
|
IE 完整支持 11 | Opera 完整支持 12.1 | Safari 完整支持 9 | WebView Android 完整支持 4.4 | Chrome Android 完整支持 29 |
Firefox Android
完整支持
28
|
Opera Android 完整支持 12.1 | Safari iOS 完整支持 9 | Samsung Internet Android 完整支持 2.0 |
baseline
|
Chrome 完整支持 57 | Edge 完整支持 79 | Firefox 完整支持 45 | IE 不支持 No | Opera 完整支持 44 | Safari 完整支持 9 | WebView Android 完整支持 57 | Chrome Android 完整支持 57 | Firefox Android 完整支持 45 | Opera Android 完整支持 43 | Safari iOS 完整支持 9 | Samsung Internet Android 完整支持 7.0 |
first baseline
and
last baseline
|
Chrome 不支持 No | Edge 不支持 No | Firefox 完整支持 52 | IE 不支持 No | Opera 不支持 No | Safari 完整支持 11 | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 完整支持 52 | Opera Android 不支持 No | Safari iOS 完整支持 11 | Samsung Internet Android 不支持 No |
left
and
right
|
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
注意事项
|
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 不支持 No |
WebView Android
不支持
No
注意事项
|
Chrome Android
不支持
No
注意事项
|
Firefox Android 完整支持 45 |
Opera Android
不支持
No
注意事项
|
Safari iOS 不支持 No |
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 |
完整支持
不支持