Baseline vs Flex-Start Alignment

In flexible layout, flex-start aligns items at the start of the cross-axis, while baseline aligns them along their content's baseline.

Baseline Alignment

As the name suggests, baseline alignment anchors the flex items' baselines, the lines where most characters sit. The item with the maximum distance between its baseline and cross-start edge will be flush against that edge.

Visual Difference

When the flex items' font sizes are uniform or the content is identical, flex-start and baseline may appear interchangeable. However, differences emerge when item sizes vary.

Determining Baseline

The tallest item in a row determines the baseline for baseline alignment.

Example

Consider the following code snippet:

.flex-container {
  align-items: baseline;
  ...
}
...
.flex-item {
  font-size: 2em;
  ...
}
...
.flex-item.item2 {
  font-size: 7em;
}

The item with the largest font size, "B," will determine the baseline for the row. The other items will align along "B"'s baseline, as depicted in the image below.

[Image of flex items aligned at varying heights using baseline alignment]

Important Note

The baseline keyword is not supported by all browsers. For cross-browser compatibility, consider using align-items: flex-start in conjunction with CSS3's vertical-align property.