CSS
align-items
property sets the
align-self
value on all direct children as a group.
In Flexbox, it controls the alignment of items on the
Cross Axis
. In Grid Layout, it controls the alignment of items on the Block Axis within their
grid area
.
The interactive example below demonstrates some of the values for
align-items
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.
/* Basic keywords */ align-items: normal; align-items: stretch; /* Positional alignment */ /* align-items does not take left and right values */ align-items: center; /* Pack items around the center */ align-items: start; /* Pack items from the start */ align-items: end; /* Pack items from the end */ align-items: flex-start; /* Pack flex items from the start */ align-items: flex-end; /* Pack flex items from the end */ /* Baseline alignment */ align-items: baseline; align-items: first baseline; align-items: last baseline; /* Overflow alignment (for positional alignment only) */ align-items: safe center; align-items: unsafe center; /* Global values */ align-items: inherit; align-items: initial; align-items: unset;
normal
start
on
replaced
absolutely-positioned boxes, and as
stretch
on
all other
absolutely-positioned boxes.
stretch
.
stretch
.
stretch
, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like
start
.
flex-start
The cross-start margin edges of the flex items are flushed with the cross-start edge of the line.
flex-end
The cross-end margin edges of the flex items are flushed with the cross-end edge of the line.
center
The flex items' margin boxes are centered within the line on the cross-axis. If the cross-size of an item is larger than the flex container, it will overflow equally in both directions.
start
The items are packed flush to each other toward the start edge of the alignment container in the appropriate axis.
end
The items are packed flush to each other toward the end edge of the alignment container in the appropriate axis.
self-start
The items are packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis.
self-end
The items are packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis.
baseline
first baseline
last baseline
stretch
Flex items are stretched such that the cross-size of the item's margin box is the same as the line while respecting width and height constraints.
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
|
|---|---|
| 适用于 | 所有元素 |
| 继承 | no |
| 计算值 | 如指定 |
| 动画类型 | discrete |
normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ]where
<baseline-position> = [ first | last ]? baseline
<overflow-position> = unsafe | safe
<self-position> = center | start | end | self-start | self-end | flex-start | flex-end
#container {
height:200px;
width: 240px;
align-items: 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-items: </label>
<select id="values">
<option value="normal">normal</option>
<option value="flex-start">flex-start</option>
<option value="flex-end">flex-end</option>
<option value="center" selected>center</option>
<option value="baseline">baseline</option>
<option value="stretch">stretch</option>
<option value="start">start</option>
<option value="end">end</option>
<option value="self-start">self-start</option>
<option value="self-end">self-end</option>
<option value="left">left</option>
<option value="right">right</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 self-end">safe self-end</option>
<option value="unsafe self-end">unsafe self-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.alignItems = evt.target.value;
});
display.addEventListener('change', function (evt) {
container.className = evt.target.value;
});
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Box Alignment Module Level 3
The definition of 'align-items' in that specification. |
工作草案 | Update to latest syntax definitions. |
|
CSS Flexible Box Layout Module
The definition of 'align-items' 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
|
first baseline
and
last baseline
|
Chrome 完整支持 59 | Edge 完整支持 79 | Firefox 完整支持 45 | IE 不支持 No | Opera 完整支持 46 | Safari 完整支持 11 | WebView Android 完整支持 59 | Chrome Android 完整支持 59 | Firefox Android 完整支持 45 | Opera Android 完整支持 43 | Safari iOS 完整支持 11 | Samsung Internet Android 完整支持 7.0 |
left
and
right
|
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 |
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
注意事项
|
start
and
end
|
Chrome 不支持 No | Edge 不支持 No | Firefox 完整支持 45 | IE 不支持 No | Opera 完整支持 44 | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 完整支持 45 | Opera Android 完整支持 43 | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
完整支持
不支持
见实现注意事项。
用户必须明确启用此特征。
要求使用供应商前缀或不同名称。
| 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 |
start
and
end
|
Chrome 完整支持 57 | Edge 完整支持 79 | Firefox 完整支持 52 | IE 不支持 No | Opera 完整支持 44 | Safari 完整支持 11 | WebView Android 完整支持 57 | Chrome Android 完整支持 57 | Firefox Android 完整支持 52 | Opera Android 完整支持 43 | Safari iOS 完整支持 11 | Samsung Internet Android 完整支持 7.0 |
完整支持
不支持
align-self
property