Expected value:

Accepted units:

Align self

The align-self property aligns flex items of the current flex line, overriding the align-items value.

Options and behavior:

Start - Place the items at the start

End - Place the items at the end

Flex-start - Place the items at the start with the cross-start margin edge of the flex item flushed with the cross-start edge of the line

Flex-end - Place the items at the end with the cross-end margin edge of the flex item flushed with the cross-end edge of the line.

Centre - Place the flex item's margin box to 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

Auto - Set to the parent's align-items value

Normal - Meaning of keyword changes depending on the layout type:

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

The property doesn't apply to block-level boxes, and to table cells

Self-start - Align the items to be flush with the edge of the container corresponding to the item's start side in the cross axis

Self-end - Aligns the items to be flush with the edge of the container corresponding to the item's end side in the cross axis

Baseline - Aligns the items so that their baselines are all aligned

First baseline -

Last baseline -

Stretch - If the items combined size is less than the overall container width along the cross axis, any auto-sized items will stretch equally to fill the available space. max-height and max-width is honored

Safe - If the size of the item overflows the container, the item is instead aligned as if it used 'start'

Unsafe - If the size of the items overflow the container, their width is honored.