Align Items (Cross Axis) in CSS
From the CSS Flexbox cheat sheet · Alignment · verified Jul 2026
Align Items (Cross Axis)
Align flex items along the cross axis (vertical by default) within their line
css
.container {
align-items: stretch; /* stretch to fill */
align-items: flex-start; /* align to start */
align-items: flex-end; /* align to end */
align-items: center; /* center items */
align-items: baseline; /* text baseline */
}html
<div class="container">
<div class="item small">Small</div>
<div class="item medium">Medium</div>
<div class="item large">Large</div>
</div>🎨 Stretch
1
2
3
🎨 Center
S
M
L
↕️ Controls cross axis alignment
💡 stretch is default
🎯 center for perfect centering