The align-items property in Flexbox controls the alignment of flex items along the cross axis of a flex container. While justify-content manages spacing along the main axis, align-items ensures proper vertical or horizontal alignment depending on the flex direction.

Key Points

1
align-items aligns all flex items along the cross axis (perpendicular to the main axis).
2
Common values include:
- flex-start: items are aligned at the start of the cross axis.
- flex-end: items are aligned at the end of the cross axis.
- center: items are centered along the cross axis.
- stretch (default): items stretch to fill the container along the cross axis.
- baseline: items align along their text baseline.
3
align-items affects all items in the container, while align-self can override it for individual items.
4
Useful for controlling vertical alignment in a row or horizontal alignment in a column layout.

Example: Using align-items

In this example, align-items: center vertically centers all .item elements along the cross axis, while justify-content: space-around spaces them evenly along the main axis.

Best Practices

1
Choose align-items values based on desired cross-axis alignment.
2
Combine with justify-content for full control over both axes.
3
Use align-self for individual items when they need different alignment from the rest.
4
Test layouts in both row and column directions to ensure proper alignment.

Difficulty: 3/10

Topics: flexbox layout, cross-axis alignment, container vs item behavior

Scenario Questions

0-2 years experience

1
You're building a navigation bar with five links, and they're not vertically centered even though you set align-items: center. What’s the most likely cause, and how would you fix it?
2
Your team’s design shows a card with an image and text stacked vertically, but the text is sticking to the top. You’ve set display: flex on the card — what align-items value should you use to center the text horizontally?
3
If you set align-items: flex-end on a row-direction flex container, where will the items align? Show me with a quick sketch or describe it.

2-5 years experience

1
A responsive product grid breaks on mobile: items are misaligned when the container switches from row to column. You’ve set align-items: stretch everywhere — why might this still look wrong on small screens, and how would you debug it?
2
Your modal dialog has a form with labels and inputs. On desktop, align-items: center looks fine, but on mobile, the inputs stretch too wide and look awkward. What’s happening, and how would you adjust the layout without breaking desktop?
3
A teammate says ‘align-items doesn’t work on my flex container’ — you check the code and see it’s applied correctly. What are three possible reasons this might appear broken, and how would you investigate?

5-8 years experience

1
You’re designing a reusable card component that must support both row and column layouts depending on screen size. How do you ensure align-items behaves predictably across both modes without requiring consumers to override it?
2
In a high-traffic dashboard, we have hundreds of flex-based cards with dynamic content. We’re seeing layout thrashing on scroll. Could align-items be contributing? What performance considerations should you evaluate when using it at scale?
3
Your design system uses align-items: baseline for text-heavy components, but it causes inconsistent vertical alignment when icons or buttons are mixed in. How would you redesign this to maintain visual harmony without introducing brittle overrides?

8+ years experience

1
We’re migrating from a float-based layout system to flexbox across 50+ legacy components. Many rely on hardcoded heights and margins for alignment. How would you approach standardizing align-items usage without breaking existing UIs or requiring a full rewrite?
2
Your team owns a design system used by 10+ product teams. Some teams use align-items: stretch for dynamic content, others use center for consistency. This leads to visual inconsistency in shared layouts. How would you architect a solution that enforces alignment semantics without stifling flexibility?
3
We’re building a cross-platform UI framework (web, mobile web, native wrappers). How do you handle align-items in a way that abstracts browser inconsistencies while preserving expected behavior across platforms — especially when native components don’t support flexbox?

Follow-up Questions

❓What happens if you set align-items: center on a flex container with items of different heights?
❓How does align-items behave differently when the flex-direction is column instead of row?
❓Can you explain why some items might still appear misaligned even when align-items is set to stretch?