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 only used if the container has more than one line, if only one line is present no effects will occur.
To support align-self property on different browsers we need to add some prefixes, they 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 in the container.
Flex item is moved to the ending position in the container.
Flex item is moved to the center of the container.