align-self

specifies the alignment for a selected item inside the flexible container

Syntax

/*
    align-self: auto;
    align-self: baseline;
*/

Values

auto
auto is the default. The element inherits its parent container’s align-items property or stretch if it has no parent container.

stretch
Element is positioned to fit the container

center
Element is positioned at the center of the container

flex-start

Element is positioned at the start of the container

flex-end

Element is positioned at the end of the container

baseline

Element is positioned at the baseline

initial

Sets this property to its default value

inherit

Element inherits this property from its parent element

Browser Compatibilty

Demos

Have a code example of align-self? Submit a codepen.io demo and we'll showcase it here ↴