CSS Flexbox
Align Items
The
align-itemsproperty is used to control the alignment of flex items along the cross axis of a flex container.
While justify-content controls alignment on the main axis, align-items controls alignment on the cross axis. The supporting concepts are explained in Justify Content and Flex Item Sizing.
For a flex container with:
css
flex-direction: row;Main Axis -> Horizontal
Cross Axis -> Vertical
The align-items property is commonly used to center items vertically, align them at the top or bottom, or stretch them to fill available space.
Syntax
Align Items Syntax
css
.container {
display: flex;
align-items: value;
}Align Items Example
css
.container {
display: flex;
align-items: center;
}This vertically centers all flex items inside the flex container.
Attributes
| Value | Description | Example |
|---|---|---|
| stretch | Default. Stretches items to fill container | align-items: stretch; |
| flex-start | Aligns items at the start of cross axis | align-items: flex-start; |
| center | Centers items on cross axis | align-items: center; |
| flex-end | Aligns items at the end of cross axis | align-items: flex-end; |
| baseline | Aligns items based on text baseline | align-items: baseline; |
Example
Align Items Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>Align Items Example</title>
<style>
.container {
display: flex;
align-items: center;
height: 200px;
border: 2px solid black;
gap: 10px;
}
.item {
background-color: lightblue;
padding: 20px;
border: 1px solid #333;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| align-items in Flexbox | 52 | 12 | 20 | 7 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
Notes
align-itemsworks along the cross axis.- For
flex-direction: row, it controls vertical alignment. - For
flex-direction: column, it controls horizontal alignment. - It only affects flex items inside a flex container.
- Frequently combined with
justify-contentfor perfect centering.
Perfect Centering Example
Perfect Centering Example
css
.container {
display: flex;
justify-content: center;
align-items: center;
}Centers content both horizontally and vertically.
Visual Comparison
flex-start
text
Item1 Item2 Item3
-----------------center
text
-----------------
Item1 Item2 Item3
-----------------flex-end
text
-----------------
Item1 Item2 Item3stretch
text
[Item1][Item2][Item3]Conclusion
The align-items property controls how flex items are aligned along the cross axis. Whether you need top alignment, bottom alignment, stretching, or perfect vertical centering, align-items provides a simple and powerful solution for modern Flexbox layouts.