0Pricing
CSS Academy · Lesson

Flex Item Alignment Override with align-self

Override the container's align-items for individual flex items using align-self.

What is align-self?

align-self overrides the flex container's align-items setting for a specific flex item. It applies to individual items, not the container.

align-self Values

Accepts the same values as align-items:

  • auto — inherits container's align-items (default)
  • flex-start — aligns to cross start
  • flex-end — aligns to cross end
  • center — centers on cross axis
  • stretch — stretches to fill cross size
  • baseline — aligns text baselines

All lessons in this course

  1. Flex Item Alignment Override with align-self
  2. Order Property and Visual Reordering
  3. Flex Shorthand Patterns
  4. Common Flexbox Layouts: Nav Cards Media Object
← Back to CSS Academy