Align Self Classes
Bellow is a Demonstration of How the Align Self Class Works
Back
align-self: auto (default)
Item inherits parent's align-items value (default: stretch)
1
auto
3
align-self: flex-start
Item is placed at the start of the cross axis
1
start
3
align-self: flex-end
Item is placed at the end of the cross axis
1
end
3
align-self: center
Item is centered along the cross axis
1
center
3
align-self: stretch
Item stretches to fill the container (default behavior)
1
stretch
3
Mixed align-self values
Different align-self values applied to items in the same container
start
center
end
stretch
Practical Example: Dashboard Cards
Using align-self to position individual dashboard components
Header
Alert
Main Content
Sidebar
Stats
Important Notes:
align-self works along the
cross axis
(vertical for row, horizontal for column)
Overrides the container's align-items value for individual items
Requires the container to have
display: flex
Only works on flex items (direct children of flex containers)
For horizontal alignment in row direction, use
justify-content
instead