align-items aligns items along the cross axis: vertically in a row layout.
index.html
HTML
<style>
.container { background: #f4f9fc; border: 2px dashed #1a5276; padding: 8px; }
.box { background: #d94a00; color: #fff; padding: 12px 18px; font-weight: bold; }
.container { display: flex; height: 100px; margin-bottom: 8px; }
.box:nth-child(2) { padding: 22px 18px; }
p { margin: 6px 0 2px; font-size: 13px; }
</style>
<p>stretch (default)</p><div class="container" style="align-items:stretch"><div class="box">1</div><div class="box">2</div><div class="box">3</div></div>
<p>flex-start</p><div class="container" style="align-items:flex-start"><div class="box">1</div><div class="box">2</div><div class="box">3</div></div>
<p>center</p><div class="container" style="align-items:center"><div class="box">1</div><div class="box">2</div><div class="box">3</div></div>
<p>flex-end</p><div class="container" style="align-items:flex-end"><div class="box">1</div><div class="box">2</div><div class="box">3</div></div>| Value | Result |
|---|---|
stretch | Items fill the container’s height (default) |
flex-start | Aligned to the top |
center | Centered |
flex-end | Aligned to the bottom |
baseline | Text baselines line up |
Centering, finally easy
To center something in both directions:
style.css
CSS
.center {
display: flex;
justify-content: center;
align-items: center;
min-height: 200px;
}
index.html
HTML
<style>
.center { display: flex; justify-content: center; align-items: center; height: 150px; background: #fdf2e9; }
.dot { background: #d94a00; color: #fff; padding: 14px 20px; border-radius: 8px; }
</style>
<div class="center"><div class="dot">Perfectly centered</div></div>Why “stretch” matters
Stretch is why items in a flex row all have the same height, even when one holds more text. It is also why a flex item may grow taller than you expected. Use align-items: flex-start to let each item keep its natural height.
lightbulb
Remember the pair
justify-content = along the main axis, align-items = across it. In a column layout the roles swap, as explained in flex-direction.