Align Items to Text Baseline

Baseline Alignment in Flexbox

align-items: baseline aligns flex items so that their first line of text sits on the same baseline. This is crucial when you have items with different font sizes, padding, or content structures but want their text to appear visually aligned.

CSS Code

.container {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.item-large {
  font-size: 2rem;
  padding: 20px;
}

.item-small {
  font-size: 0.875rem;
  padding: 8px;
}

How It Works

Instead of aligning items by their top edges (flex-start), bottom edges (flex-end), or centers (center), baseline alignment uses the text baseline of each item's first line of text. The browser identifies the baseline of each item and shifts them vertically so all baselines align on the same horizontal line.

baseline vs Other Alignments

Value	Aligns by
flex-start	Top edges of items
flex-end	Bottom edges of items
center	Vertical center points
baseline	First text baseline of each item
stretch	Stretches items to fill cross axis

When Baseline Matters

Baseline alignment is especially important when mixing:

• Elements with different font sizes (e.g., a heading next to a label)
• Elements with different padding amounts
• Form labels next to input fields
• Price displays with different sized numerals

Combining with align-self

Individual items can override the container's align-items with align-self. For example, you might set align-items: baseline on the container but use align-self: center on an icon that has no text baseline.