CSS align-items: Align Flex Items on the Cross Axis
What is align-items in CSS Flexbox?
The CSS align-items property aligns flex items along the cross axis, which is perpendicular to the main axis. In a normal row layout it controls vertical alignment. It is the key to vertical centering, equal-height cards and neat baseline alignment of text.
Syntax
.container {
display: flex;
align-items: stretch | flex-start | flex-end | center | baseline;
}The default value is stretch (normal), so items without a fixed height fill the full cross-axis size of the container.
Values explained
| Value | Behavior | Typical use |
|---|---|---|
| stretch | Items stretch to fill the cross axis (if height is auto) | Equal-height cards |
| flex-start | Items align at the start of the cross axis | Top-aligned content |
| flex-end | Items align at the end of the cross axis | Bottom-aligned buttons |
| center | Items centered on the cross axis | Vertical centering, icon plus text |
| baseline | Items align by the baseline of their text | Mixed font-size headings and labels |
Detailed explanation
stretch (default)
If an item has no explicit height (in a row), it grows to the height of the tallest item. That is why flex cards in a row look equal in height automatically. If you set a fixed height, stretch is ignored for that item.
flex-start and flex-end
Items stay at their natural size and stick to the top (flex-start) or bottom (flex-end) in a row layout. In a column layout they stick to the left or right.
center
The best-known use: display: flex; align-items: center; centers items vertically within the container height. Pair with justify-content: center for full centering.
baseline
Aligns items so the first line of text sits on the same invisible baseline. It is perfect when you have texts with different font sizes next to each other, such as a big price and a small currency label. Modern CSS also offers first baseline and last baseline.
Overriding one item with align-self
align-items sets the default for all children. The align-self property on a single child overrides it:
.container { display: flex; align-items: flex-start; }
.special { align-self: flex-end; }align-self accepts the same values plus auto (inherit from the parent).
align-items vs justify-content
| Property | Axis (row) | Axis (column) |
|---|---|---|
| justify-content | Horizontal | Vertical |
| align-items | Vertical | Horizontal |
Real-world use cases
- Vertically centering icon and label in buttons.
- Navbar items aligned in the middle of the header height.
- Equal-height cards using the default stretch.
- Media object: avatar on the left, text on the right.
- Form rows: label and input aligned by baseline.
Common mistakes
- Container has no height, so there is no extra cross-axis space and center seems not to work.
- Setting a fixed height on items and wondering why stretch does nothing.
- Mixing up align-items with align-content (align-content works only with wrapped multi-line containers).
- Forgetting that axes swap when flex-direction is column.
Best practices
- Use align-items: center for most UI components like buttons and headers.
- Keep stretch if you want equal-height cards.
- Use align-self for one-off exceptions instead of extra wrappers.
- Use baseline for typographic alignment of different font sizes.
Tailwind CSS equivalents
items-start, items-end, items-center, items-baseline, items-stretch. Per-item: self-start, self-end, self-center, self-stretch.
Trending keywords related to this topic
align-items center, vertical center CSS, align-items vs align-content, align-self flexbox, CSS baseline alignment, Tailwind items-center, equal height cards flexbox, CSS flexbox alignment tutorial 2026, how to center div vertically.
Frequently Asked Questions
What is the default value of align-items?
stretch (also written normal).
How do I center a div vertically with Flexbox?
Set display: flex and align-items: center on the parent and give the parent a height.
What is the difference between align-items and align-self?
align-items is set on the container for all items; align-self is set on one item to override.
When should I use baseline?
When items have different font sizes and their text lines must align.
One-click copy
Code blocks ke Copy button se code copy karein. Cheat Sheet example mein sab align-items patterns ek jagah hain.
Press Run to execute.
Press Run to execute.
Press Run to execute.
Press Run to execute.
The icon box and the text are not vertically centered. Fix it using align-items so both sit in the middle of the container height.
Press Run to execute.
Show expected output
Icon and text are vertically centered inside the 120px tall container (align-items: center).This is a self-check — compare your result with the expected output above.
Was this page helpful?