CSS Align Self

Align Self

The 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

Values

1. Auto

equals the align-items value of the parent.

2. Normal

This keyword's impact varies according to the layout mode we're in:

• The keyword in absolutely-positioned layouts acts as a stretch on all other absolutely-positioned boxes and as a start on substituted absolutely-positioned boxes.
• The keyword behaves as a stretch in absolutely positioned layouts in a static position.
• In the case of flex items, the term acts like a stretch.
• This keyword causes a behavior for grid items that are like stretch, with the exception of boxes that have intrinsic sizes or an aspect ratio, in which case it acts like a start.
• This attribute does not cover table cells and block-level boxes.

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

• Initial value: Auto
• Applies to: Flex items, grid items, and absolutely-positioned boxesNot
• Inherited: No
• Computed value: Auto computes to start if the box has no parent and to the computed value of align-items on the parent (less any legacy keywords) on all other boxes. It also computes itself on absolutely-positioned elements. The layout model determines its actions, as justify-self explains. Alternatively, the given value.

Formal syntax:

Examples

HTML

CSS