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.

#Examples

css-apisrc/align-items/App.tsx

Preview

#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.

#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.

#auto Deprecated

Equivalent to stretch. Not recommended, as this value doesn't exist in Web.

#Formal definition

#Formal syntax

align-items = stretch | center | start | end | flex-start | flex-end | baseline | auto

#Differences from web

mdn: align-items

1. normal, self-start and self-end are not supported. Initial value is stretch.

#Compatibility