- Initial value
- Applies to flex containers
- Inherited no
- 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.
/* 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; align-items: inherit;
- The cross-start margin edge of the flex item is flushed with the cross-start edge of the line.
- The cross-end margin edge of the flex item is flushed with the cross-end edge of the line.
- 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.
- 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.
- 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.
|CSS Flexible Box Layout Module
The definition of 'align-items' in that specification.
|Feature||Chrome||Firefox (Gecko)||Internet Explorer||Opera||Safari|
|Basic support||21.0-webkit||20.0 (20.0)||11.0 ||12.10||7.0-webkit|
|Feature||Android||Chrome for Android||Firefox Mobile (Gecko)||IE Mobile||Opera Mobile||Safari Mobile|
|Basic support||4.4||?||20.0 (20.0)||Not supported||12.10||7.0-webkit|
 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.
 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.