CSS align-self Property

The align-self property specifies the default alignment for items within the flex container.

The align-self property in CSS is used to align the selected items in the flexible container in many different manners such as flex-end, center, flex-start, etc.

  • flex-start: cross-start margin edge of the item is placed on the cross-start line
  • flex-end: cross-end margin edge of the item is placed on the cross-end line
  • center: item is centered in the cross-axis
  • baseline: items are aligned such as their baseline are aligned
  • stretch (default): stretch to fill the container (still respect min-width/max-width)

Syntax:

align-self: auto|stretch|center|flex-start|flex-end|baseline|
initial;

Example -