align-items
Introduction
align-items property sets the align-self value on all direct children as a group. In flexible box layout and linear layout, 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.
For flexible box layout, if any child element's cross-axis margin is set to auto, align-items will be ignored.
For grid layout, Lynx doesn't support writing-mode, so the block axis is the vertical axis.
Examples
Syntax
Values
stretch
Default value. If items are smaller than the container in the cross-axis direction (block axis in grid layout), items with unspecified dimensions (height/width) or set to auto will be stretched to match the height of the row or width of the column. These items still maintain their aspect ratio constraints.
center
In flex and linear layouts, items are centered along the cross axis.
In grid layout, items are centered along the block axis within their grid area.
In flexible box layout, if an item's cross-axis size is larger than the flex container, it will overflow equally in both directions.
start
In flex and linear layouts, items are aligned at the start of the cross axis.
In grid layout, items are aligned with the start edge of their grid area along the block axis.
end
In flex and linear layouts, items are aligned at the end of the cross axis.
In grid layout, items are aligned with the end edge of their grid area along the block axis.
flex-start
Behaves the same as start.
flex-end
Behaves the same as end.
baseline
All flex items are aligned such that their flex container 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. Currently only supported in flexible box layout.
autoDeprecated
Equivalent to stretch. Not recommended, as this value doesn't exist in Web.
Formal definition
| Initial value | stretch |
| Applies to | flex/grid/linear containers |
| Inherited | no |
| Animatable | no |
Formal syntax
Differences from web
normal,self-startandself-endare not supported. Initial value isstretch.
Compatibility
LCD tables only load in the browser