Both align-items and align-content are Flexbox properties used to align items along the cross axis, but they serve different purposes depending on the number of flex lines in the container.

Key Differences

1
align-items aligns individual items within a single flex line along the cross axis.
2
align-content aligns multiple lines of flex items (when wrapping occurs) within the flex container.
3
align-items works regardless of whether items wrap or not.
4
align-content only applies when there is extra space in the cross axis and when flex-wrap is enabled.
5
align-items controls how each item is aligned within its line, while align-content controls how the lines themselves are spaced inside the container.

Example: align-items vs align-content

In this example, align-items: center vertically centers each item within its line, while align-content: space-between distributes the multiple lines evenly across the container height.

Best Practices

1
Use align-items for aligning items within a single row or column.
2
Use align-content when dealing with multiple flex lines (using flex-wrap).
3
Combine both for fine-tuned control over layout alignment along the cross axis.
4
If your layout has only one line of items, align-content has no visible effect.

Difficulty: 6/10

Topics: flexbox layout, multi-line alignment, container overflow behavior

Scenario Questions

0-2 years experience

1
You're building a card grid with 3 items per row, and they're all sticking to the top — how would you center them vertically within each row?
2
If you set align-items: center on a flex container with 5 items in one line, but the container is taller than the items, where do the items appear?
3
What happens if you apply align-content: space-between to a flex container that only has one line of items?

2-5 years experience

1
A responsive product grid breaks on mobile — items are stacking but the vertical spacing looks uneven. You've set align-items: center, but the content still looks misaligned. What’s likely wrong?
2
Your team’s component library has a flex-based sidebar that sometimes has 1 item, sometimes 5. When it has multiple items, the vertical spacing between them feels off. How would you fix it without breaking the single-item case?
3
A designer complains that a modal’s content is aligned to the top on tablets but centered on desktop. You’ve used align-items: center — what could be causing this inconsistency?

5-8 years experience

1
You're designing a dynamic dashboard with collapsible panels that can wrap into multiple rows. How do you ensure consistent vertical spacing between rows when the container height changes dynamically, and why can't you just use align-items?
2
A legacy component uses flexbox with flex-wrap: wrap and align-content: stretch, but now it's causing overflow on low-res screens. How would you refactor this to be more robust without breaking existing layouts?
3
In a high-performance UI library, you notice that align-content is causing layout thrashing on mobile devices during resize. How would you optimize this without losing visual consistency?

8+ years experience

1
You're leading a cross-team effort to unify layout systems across 12 product surfaces. Some teams use align-content for spacing, others use margins — how do you standardize this without introducing regressions or performance issues?
2
Your company is migrating from a legacy grid system to CSS Flexbox. Teams are misusing align-content as a spacing tool because they don’t understand its line-based behavior. How do you architect a training and linting strategy to prevent this at scale?
3
A design system component that uses align-content works fine in the demo but breaks in production when content is dynamically loaded. How do you design the API to make this behavior predictable and safe for engineers across teams?

Follow-up Questions

❓What happens if you set align-content but don't have multiple lines?
❓How would you debug a layout where items are misaligned even though align-items looks correct?
❓Can align-content work on a flex container with flex-wrap: nowrap?