CSS align-self property
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
- -webkit- : It supports chrome, safari and new version of opera
- -moz- : It support Firefox.
- -o- : Old versions of opera.
- -ms- : Internet explorer.
CSS align-self property values
align-self can have different values, but we will see the commonly used values.
- auto
- stretch
- flex-start
- flex-end
- center
auto value for css align-self property
It inherits the property of the parent container. If the property is not given, it take "stretch" as the default value.
stretch value for css align-self property
It is used to auto fill the space available, to fit the flex item in the container.
flex-start value for css align-self property
Flex item is moved to the starting position in the container.
flex-end value for css align-self property
Flex item is moved to the ending position in the container.
center value for css align-self property
Flex item is moved to the center of the container.