CSS3 align-self Property
To override align-items for individual flex items.
Definition and Notes.
1. The CSS3 align-self property is used to align flex items of the current line, it overrides the values set by the align-items property.
2. No effect will be created if there is only a single row or column.This property is similar to the justify-content.
CSS3 align-self property.
View in Splitscreen»
Code-Editor:Note-Even if there is one item with flex-grow value other than 0, no properties will be applied, as no empty space would be available
|flex-start||Flex Items are laid towards the start of the main axis.Its the default|
|flex-end||Flex Items are laid towards the end of the main axis|
|center||Flex items are laid in the center of the container|
|baseline||Flex items are evenly laid out on the Main axis, with first and last item against the edge|
|stretch||Flex items are evenly laid out on the main axis, with half-size spaces at each end of the axis|
|auto||It inherits the value of the parent's align-items property.Its the default value.|
|Value||flex-start | flex-end | center | baseline | stretch | auto|
|Computed Value||Same as declared value.|