align-self#

#Introduction

In flex and linear layout, align-self will align the elements in the current container on the cross axis. In grid layout, align-self controls the alignment of child elements along the block axis within their grid area, and align-self overrides the existing value of align-items.

For flexible box layout, if any child element's cross-axis margin is set to auto, align-self will be ignored.

#Examples

css-apisrc/align-self/App.tsx

Preview

#Syntax

#Values

#auto

Default value. Aligns according to the parent's align-items value.

#stretch

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, the item is centered along the cross axis.

In grid layout, the item is centered along the block axis within its grid area.

#start

In flex and linear layouts, the item is aligned at the start of the cross axis.

In grid layout, the item is aligned with the start edge of its grid area along the block axis.

#end

In flex and linear layouts, the item is aligned at the end of the cross axis.

In grid layout, the item is aligned with the end edge of its grid area along the block axis.

#flex-start

Behaves the same as start.

#flex-end

Behaves the same as end.

#baseline

The item participates in baseline alignment. Currently only supported in flexible box layout.

#Formal definition

#Formal syntax

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

#Differences from web

mdn: align-self

1. normal, self-start and self-end are not supported.

#Compatibility