CSS align-self Property
The align-self property specifies the default alignment for items within the flex container.
The align-self CSS property overrides a grid or flex item's align-items value.
Note - auto margins effectively adjust the size of the margin area, take precedence over align-self.
align-self: normal | stretch | baseline-position | [ overflow-position ? self-position] |inherit|initial;
The following table describes the values of this property:
|This is default value. The element takes the computed value of its parent element align-items property or stretch if it has no parent.
|Represents the “default” alignment for the layout mode. Its behavior depends on the layout mode, as described below.
|Items are positioned at the baseline of the flex container.
|The element is positioned at the center of the flex container.
|The element is stretched to fit the flex container.
|The element is positioned at the end of the flex container.
|The element is positioned at the beginning of the flex container.
|The items are packed flush to each other toward the start edge of the alignment container in the appropriate axis.
|The items are packed flush to each other toward the end edge of the alignment container in the appropriate axis.
|The items are packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis.
|The items are packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis.
|Used alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were start.
|Used alongside an alignment keyword. Regardless of the relative sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored.
|Sets this property to its default value.
|If specified, the associated element takes the computed value of its parent element animation-delay property.
|Reverts the cascaded value of the property from its current value to the value the property
|Rollback styles to the ones specified in previous cascade layers.
|Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.
Default CSS Property Values
grid-template: 120px 120px / auto auto auto;
border: 2px solid red;