The align-self property in CSS allows individual flex items to override the container’s align-items setting. It controls how a specific item is aligned along the cross axis (perpendicular to the main axis). This makes it useful when you need a single item to have a different alignment than the others in the same flex container.

Syntax

1
align-self: auto | flex-start | flex-end | center | baseline | stretch;
2
Default value is auto, which means the item inherits the container’s align-items value.

Possible Values

1
auto: Inherits from the container’s align-items property.
2
flex-start: Aligns the item at the start of the cross axis.
3
flex-end: Aligns the item at the end of the cross axis.
4
center: Centers the item along the cross axis.
5
baseline: Aligns the item’s baseline with other items.
6
stretch: Stretches the item to fill the container (default if height is auto).

Example: Using align-self in a Flex Container

In this example, all items are aligned to the center of the container by default, but Item 2 moves to the bottom (flex-end), and Item 3 moves to the top (flex-start) because of their align-self values.

Best Practices

1
Use align-self to override alignment for specific flex items without changing the container’s layout.
2
Combine with align-items for consistent yet flexible layouts.
3
Avoid overusing different alignments within the same container for cleaner design consistency.

Difficulty: 3/10

Topics: flexbox alignment, individual item control, override of align-items

Scenario Questions

0-2 years experience

1
You have a flex container with align-items: center, but one button inside needs to be aligned to the top — how would you fix that?
2
A card component’s image is stretching too much vertically while the text below is centered — what CSS property would you use to make the image align to the top without affecting the text?
3
If you set align-self: flex-end on a flex item but it doesn’t move, what’s the first thing you’d check?

2-5 years experience

1
A responsive navigation bar breaks on mobile: the logo is misaligned after switching from row to column layout — how would you debug and fix it using align-self?
2
Your team’s design system uses a shared flex container for cards, but one variant needs a different vertical alignment — how do you implement this without breaking other cards or adding excessive CSS?
3
A modal popup has inconsistent alignment across browsers — some items are off by a few pixels. You suspect align-self is involved. What would you investigate?

5-8 years experience

1
You’re designing a dynamic dashboard with user-placed widgets in a flex container — how would you architect the alignment system so editors can override default alignment per widget without causing layout thrashing or performance issues?
2
A legacy component library uses align-self inconsistently across components, leading to visual bugs in new layouts. How would you refactor this at scale while maintaining backward compatibility?
3
In a high-performance UI with hundreds of flex items, how might overuse of align-self impact rendering performance or layout recalculations? When would you avoid it?

8+ years experience

1
You’re leading the migration from a legacy float-based layout system to flexbox across 50+ products — how do you handle teams that misuse align-self to patch alignment issues instead of fixing the underlying container structure?
2
How would you design a design token system for alignment that allows product teams to customize align-self behavior without creating visual fragmentation across the UI system?
3
An enterprise app has inconsistent vertical alignment in sidebars across different regions due to inherited align-self values. How would you enforce alignment consistency at the architecture level without forcing rigid component boundaries?

Follow-up Questions

❓What happens if you set align-self: auto on a flex item?
❓How does align-self behave differently in a column-direction flex container?
❓Can align-self be used in grid layouts the same way?