Retour au cours

Lesson 63: Flex Item Property: align-self (Individual Cross-Axis Alignment)

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

63. Flex Item Property: align-self (Individual Cross-Axis Alignment)

While align-items (on the container) sets the default alignment for all items along the cross axis, align-self allows you to override that alignment for a single flex item.

Available Values

align-self accepts the same values as align-items:

  • auto (inherits from align-items)
  • flex-start
  • flex-end
  • center
  • stretch
  • baseline

Example: Overriding Alignment

If the container is set to center items vertically, but you want one specific item to be at the bottom:

css .flex-container { display: flex; height: 200px; align-items: center; /* Default: all items centered vertically */ }

.item-special { align-self: flex-end; /* Overrides the parent and snaps this item to the bottom */ background-color: red; }

Common Use: Adjusting an image or icon within a row where the surrounding text is centered.