CSS align-self, is used in flexbox containers to align an individual flex item.
It is used to align the flex items of the current flex line overriding the align-items value.
It can be used only if the container has more than one line, because if only one line is present no effects will occur.
To support align-self property on different browsers we need to add some prefixes. Some of them are
align-self can have different values, but we will see the commonly used values.
It inherits the property of the parent container. If the property is not given, it take "stretch" as the default value.
It is used to auto fill the space available, to fit the flex item in the container.
Flex item is moved to the starting position of the container.
Flex item is moved to the ending position of the container.
Flex item is moved to the center of the container.