align-self

The align-self CSS property overrides a grid or flex item’s align-items value. In grid, it aligns the item inside the grid area. In flexbox, it aligns the item on the cross axis.

The property doesn’t apply to block-level boxes, or to table cells. If a flexbox item’s cross-axis margin is auto, then align-self is ignored.

Values: This property is specified as one or two of the following keyword values:

Values: auto Computes to the parent’s align-items value. normal The effect of this keyword is dependent of the layout mode we are in: In absolutely-positioned layouts, the keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes. In static position of absolutely-positioned layouts, the keyword behaves as stretch. For flex items, the keyword behaves as stretch. For grid items, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic size where it behaves like start. The property doesn’t apply to block-level boxes, and to table cells.

Syntax example: align-self: auto;