Align Self - Starting Point
Override the align-items value for individual flex items. Perfect for making one item behave differently!
Default: Item follows container's align-items
All items follow the container's align-items: center
Item 1
Tall Item 2
Item 3
Item 4
align-self: flex-start
Make one item align to the start while others stay centered
Item 1
Special Item (flex-start)
Item 3
Item 4
align-self: flex-end
Make one item align to the end
Item 1
Item 2
Special Item (flex-end)
Item 4
align-self: stretch
Make one item stretch to fill the container height
Item 1
Item 2
Item 3
Special Item (stretch)
Multiple align-self values
Different items can have different align-self values
flex-start
Normal (center)
flex-end
stretch
🎯 Practical Example: Navigation
Perfect for navigation bars where you want one item to behave differently:
Home
About
Services
Login
Instructions
Add display: flex and align-items: center to containers, then add align-self values to special items!
Key Points:
align-self only affects the individual item, not others- It overrides the container's
align-items value
- Perfect for making exceptions in your layout
- Great for navigation bars, card layouts, and hero sections