The 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.
/* 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
flex-end
center
start
end
self-start
self-end
baseline
first baseline
last baseline
stretch
safe
start
.unsafe
Initial value | normal |
---|---|
Applies to | all elements |
Inherited | no |
Computed value | as specified |
Animation type | 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>
Specification | Status | Comment |
---|---|---|
CSS Box Alignment Module Level 3 The definition of 'align-items' in that specification. | Working Draft | Update to latest syntax definitions. |
CSS Flexible Box Layout Module The definition of 'align-items' in that specification. | Candidate Recommendation | Initial definition |
Desktop | ||||||
---|---|---|---|---|---|---|
Supported in Flex Layout | 52
|
12
|
20
|
11
|
12.1 | 9
|
first baseline and last baseline
|
59 | 79 | 45 | No | 46 | 11 |
left and right
|
No | No | 45 | No | No | 9 |
safe and unsafe
|
No
|
No
|
63 | No | No
|
No
|
start and end
|
No | No | 45 | No | 44 | No |
Mobile | ||||||
---|---|---|---|---|---|---|
Supported in Flex Layout | 52
|
52
|
20
|
12.1 | 9
|
6.0
|
first baseline and last baseline
|
59 | 59 | 45 | 43 | 11 | 7.0 |
left and right
|
No | No | 45 | No | 9 | No |
safe and unsafe
|
No
|
No
|
63 | No
|
No
|
No
|
start and end
|
No | No | 45 | 43 | No | No |
Desktop | ||||||
---|---|---|---|---|---|---|
Supported in Grid Layout | 57 | 16 | 52 | No | 44 | 10.1 |
start and end
|
57 | 79 | 52 | No | 44 | 11 |
Mobile | ||||||
---|---|---|---|---|---|---|
Supported in Grid Layout | 57 | 52 | 52 | 43 | 10.3 | 6.2 |
start and end
|
57 | 57 | 52 | 43 | 11 | 7.0 |
align-self
property
© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/align-items