On this page
CSS align-items: Align Flex Items on the Cross Axis
What Is align-items in CSS?
The align-items property aligns flex items along the cross axis of a flex container. In the default row layout, that means vertical alignment. It is the property you use to vertically center content with CSS flexbox, to make cards the same height, and to align text and icons neatly.
Syntax
.container {
display: flex;
align-items: stretch | flex-start | flex-end | center | baseline;
}The default value is stretch (the initial value is normal, which behaves like stretch in flexbox).
align-items vs justify-content
| Property | Axis | In a row layout | In a column layout |
|---|---|---|---|
| justify-content | Main axis | Horizontal | Vertical |
| align-items | Cross axis | Vertical | Horizontal |
align-items Values Explained
align-items: stretch (default)
Items stretch to fill the full size of the cross axis. In a row, items become as tall as the tallest item or the container height. This is why flex items in a row have equal height by default. Stretch only works when the item's cross size (height in a row) is not set to a fixed value.
align-items: flex-start
Items are aligned at the start of the cross axis, which is the top in a row layout. Items keep their natural height.
align-items: flex-end
Items are aligned at the end of the cross axis, which is the bottom in a row layout.
align-items: center
Items are centered on the cross axis. Combined with justify-content: center, it gives you the shortest way to center an element in both directions.
align-items: baseline
Items are aligned so that the first line of text in each item shares the same baseline. This is perfect when items have different font sizes or padding and you still want the text to line up. The values first baseline and last baseline are also available in modern browsers.
The align-self Property
align-items is set on the container and applies to all items. To override the alignment for one item, use align-self on that item. It accepts the same values, plus auto, which means inherit the container's align-items value.
.container {
display: flex;
align-items: flex-start;
height: 200px;
}
.special {
align-self: flex-end;
}How to Center a Div Vertically with align-items
.parent {
display: flex;
align-items: center;
height: 300px;
}The container needs a height (or min-height). Without it, the container is only as tall as its content, so there is no extra cross-axis space to center within.
align-items in a Column Layout
When flex-direction is column, the cross axis is horizontal. Then align-items: center centers items horizontally, and align-items: stretch makes them fill the full width. This pattern is very common for mobile layouts and cards.
Practical Use Cases
- Navigation bar: align logo, links and buttons on one vertical center line.
- Media object: image on the left, text on the right, aligned at the top (flex-start).
- Icon plus label: center an SVG icon with its text.
- Form row: align an input and a button using baseline or center.
Common Mistakes
- Container has no height. Vertical centering will appear to do nothing.
- Fixed height on items with stretch. An item with a set height will not stretch.
- Mixing up align-items and align-content. align-items aligns items inside each line, align-content aligns the lines themselves.
- Forgetting that the axis flips in column layouts.
FAQ
How do I vertically center content with flexbox?
Use display: flex and align-items: center on the parent, and give the parent a height.
What is the default value of align-items?
stretch.
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 a single item to override it.
Key Takeaways
- align-items controls the cross axis.
- Values: stretch, flex-start, flex-end, center, baseline.
- Use align-self for single-item overrides.
- Vertical centering needs a container with extra height.
Press Run to execute.
Press Run to execute.
Press Run to execute.
Press Run to execute.
Press Run to execute.
Press Run to execute.
Make the blue box perfectly centered inside the grey container, both horizontally and vertically, using only flexbox. Then change the layout so the three small boxes in the second container are aligned to the bottom of the container, and make the middle one stick to the top using align-self.
Press Run to execute.
Show expected output
The blue box is exactly in the middle of the first container. In the second container, two green boxes are at the bottom and the middle one is at the top.This is a self-check — compare your result with the expected output above.
Was this page helpful?