SummaryEdit
The CSS align-items property aligns flex items of the current flex line the same way as justify-content but in the perpendicular direction.
| Initial value | stretch |
|---|---|
| Applies to | flex containers |
| Inherited | no |
| Media | visual |
| Computed value | as specified |
| Animatable | no |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
See Using CSS flexible boxes for more properties and information.
SyntaxEdit
/* Align to cross-start */
align-items: flex-start;
/* Align to cross-end */
align-items: flex-end;
/* Center items in the cross-axis */
align-items: center;
/* Align the items' baselines */
align-items: baseline;
/* Stretch the items to fit */
align-items: stretch;
/* Global values */
align-items: inherit;
align-items: initial;
align-items: unset;Values
flex-start- The cross-start margin edge of the flex item is flushed with the cross-start edge of the line.
flex-end- The cross-end margin edge of the flex item is flushed with the cross-end edge of the line.
center- The flex item's margin box is centered within the line on the cross-axis. If the cross-size of the item is larger than the flex container, it will overflow equally in both directions.
baseline- All flex items are aligned such that their baselines align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line.
stretch- Flex items are stretched such as the cross-size of the item's margin box is the same as the line while respecting width and height constraints.
-
Formal syntax
flex-start | flex-end | center | baseline | stretch
SpecificationsEdit
| Specification | Status | Comment |
|---|---|---|
| CSS Flexible Box Layout Module The definition of 'align-items' in that specification. |
Last Call Working Draft | Initial definition |
Browser compatibilityEdit
[1] To activate flexbox support in Firefox 18 and 19, the user has to visit about:config and change the value of the layout.css.flexbox.enabled preference to true. Multi-line flexbox has been supported since Firefox 28.
[2] In Internet Explorer 10-11 (but not 12+), if column flex items have align-items: center; set on them and their content is too large, they will overflow the bounds of their container. See Flexbug #2 for more info.