Visit Pixel Rocket

Align Self - Finish

See how align-self allows individual items to override the container's alignment. Perfect for creating unique layouts and handling special cases.

See Start Next: Order

Default Behavior (inherits align-items)

Item 1
Tall Item 2
Item 3
Item 4

All items follow the container's align-items: center

align-self: flex-start

Item 1
Tall Item 2
I'm at start!
Item 4

Third item overrides to align at the start

align-self: flex-end

Item 1
Tall Item 2
I'm at end!
Item 4

Third item overrides to align at the end

align-self: stretch

Item 1
Tall Item 2
I stretch!
Item 4

Third item stretches to fill the full height

Multiple overrides

Start
Center
End
Stretch

Each item has its own alignment behavior

Real-world example: Card layout

Regular Card

Normal content

Featured Card

This card is taller and stretches to be prominent

Featured

Regular Card

Normal content

Featured card stretches while others maintain their natural height

Key Takeaways

  • align-self overrides the container's align-items for individual items
  • Align Self Values:
    • auto - Uses container's align-items (default)
    • flex-start - Aligns to start of cross axis
    • flex-end - Aligns to end of cross axis
    • center - Centers on cross axis
    • stretch - Stretches to fill cross axis
    • baseline - Aligns to text baseline
  • Perfect for highlighting featured items or handling exceptions
  • Works with any flex-direction - behavior follows the cross axis
  • Commonly used for call-to-action buttons, featured cards, and special elements