CSS
Flexbox: Baseline Alignment for Varied Content
Achieve perfect vertical alignment of text and content in Flexbox items with different font sizes or heights using `align-items: baseline` for consistent typography.
.flex-container {
display: flex;
align-items: baseline; /* Key property for baseline alignment */
gap: 1rem;
border: 1px dashed #ccc;
padding: 1.5rem;
background-color: #fcfcfc;
}
.flex-item {
padding: 0.8rem 1.2rem;
background-color: #fffacd;
border: 1px solid #daa520;
border-radius: 5px;
display: inline-flex; /* Ensures content's baseline is respected */
}
.item-small {
font-size: 0.9em;
}
.item-medium {
font-size: 1.3em;
}
.item-large {
font-size: 2.2em;
}
.item-with-line-height {
font-size: 1.1em;
line-height: 2.5; /* Large line height to show its effect */
}
How it works: This snippet demonstrates `align-items: baseline` in Flexbox, a crucial property for vertical alignment when items have varying font sizes or line heights. Instead of aligning items by their top, center, or bottom edges, `baseline` aligns their textual content at a common baseline. This is especially useful for navigation bars, form elements, or lists where consistent typographic alignment across diverse content is desired, making the layout appear more harmonious and readable.