CSS Align SelfAlign SelfThe self-alignment the align-items value of a grid or flex item is overridden by a CSS attribute. In Grid, it aligns the object within the grid area, and in Flexbox, it aligns the item on the cross-axis. This attribute does not cover table cells and block-level boxes. Align-self is disregarded when the cross-axis margin of a flexbox item is set to auto. Syntax Values1. Auto equals the align-items value of the parent. 2. Normal This keyword's impact varies according to the layout mode we're in:
3. Self-start aligns the objects such that their start side on the cross-axis is flush with the alignment container's edge. 4. Self-end aligns the objects such that their end sides in the cross-axis are flush with the alignment container's edge. 5. Flex-start The flex item's cross-start margin edge and the line's cross-start edge line up. 6. Flex-end The flex item's cross-end margin edge and the line's cross-end edge line up. 7. Center The margin box of the flex item is positioned in the middle of the cross-axis line. Should the item's cross-size surpass the capacity of the flex container, it will spill equally in both directions. 8. Base, first baseline, final baseline Declares a box's intention to participate in first- or last-baseline alignment, which aligns the box's first or last baseline set alignment baseline with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. For the first baseline, the backup alignment is started, and for the last baseline, it is finished. 9. Stretch The item's size is increased equally (rather than proportionally) while adhering to the limitations imposed by max-height/max-width (or equivalent functionality) if the total size of the items along the cross-axis is less than the alignment container's size and the item is auto-sized. This ensures that the alignment container's length on the cross-axis is precisely filled with all auto-sized items. 10. Safe The item is aligned as if the alignment mode were started if its size exceeds the alignment container. 11. Unsafe The specified alignment value is respected regardless of the relative sizes of the item and alignment container. Formal Definition
Formal syntax:ExamplesHTML CSS
Next TopicCSS Animation Delay
|