CSS
Aligning Text Baselines in Flexbox Layouts
Master how to achieve perfect text alignment across Flexbox items with varying content heights by utilizing align-items: baseline for consistent typographic layouts.
.flex-container {
display: flex;
align-items: baseline; /* Key property for baseline alignment */
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
}
.flex-item {
padding: 10px;
margin: 5px;
background-color: #e6f7ff;
border: 1px solid #a0d9ff;
}
.flex-item.large-text {
font-size: 2em; /* Larger text for demonstration */
}
.flex-item.small-text {
font-size: 0.7em; /* Smaller text */
}
.flex-item.multi-line {
line-height: 1.2;
}
<!-- HTML for context -->
<div class="flex-container">
<div class="flex-item">Normal Text</div>
<div class="flex-item large-text">Big Text</div>
<div class="flex-item">Another Item</div>
<div class="flex-item small-text">Small Text</div>
<div class="flex-item multi-line">Text with<br>Multiple Lines</div>
</div>
<div class="flex-container" style="align-items: center;">
<div class="flex-item">Normal Text</div>
<div class="flex-item large-text">Big Text</div>
<div class="flex-item">Another Item</div>
<div class="flex-item small-text">Small Text</div>
<div class="flex-item multi-line">Text with<br>Multiple Lines</div>
</div>
<p>Compare the baseline alignment (top) with default center alignment (bottom).</p>
How it works: This snippet demonstrates `align-items: baseline` in Flexbox. When items have different font sizes or line heights, `baseline` alignment ensures that the baselines of their text content align perfectly across the row. This provides a more visually harmonious layout for text-heavy items compared to `align-items: center` or `flex-start`, especially when dealing with mixed content heights. The second container shows `align-items: center` for comparison, highlighting the difference.