files/en-us/web/css/reference/properties/baseline-source/index.md
The baseline-source CSS property defines which baseline to use when inline-level boxes have multiple possible baselines, such as multi-line inline blocks or inline flex containers.
The values allow for choosing between aligning to the box's first baseline, last baseline, or letting the browser decide automatically based on the box type.
/* Keyword values */
baseline-source: auto;
baseline-source: first;
baseline-source: last;
/* Global values */
baseline-source: inherit;
baseline-source: initial;
baseline-source: revert;
baseline-source: revert-layer;
baseline-source: unset;
auto
last baseline alignment for inline-block, first baseline alignment for everything else.first
first baseline alignment.last
last baseline alignment.{{cssinfo}}
{{csssyntax}}
This example demonstrates using the baseline-source property to control the baseline alignment of inline flex containers.
Our HTML includes several {{htmlelement("span")}} elements, which are generic inline containers for phrasing content.
Three of the <span> elements contain nested <span> children.
<span>Baseline ___</span>
<span class="box first">
<span>First</span>
<span>A</span>
<span>B</span>
<span>C</span>
</span>
<span class="box auto">
<span>Auto</span>
<span>A</span>
<span>B</span>
<span>C</span>
</span>
<span class="box last">
<span>A</span>
<span>B</span>
<span>C</span>
<span>Last</span>
</span>
body {
font-family: sans-serif;
}
.box {
border: 2px solid #888888;
width: 50px;
}
span {
padding: 0.4rem;
}
We define all the boxes to be inline flex containers.
We set the .first box to use the first baseline, the .auto box uses the default baseline (which is first for inline flex containers), and the .last box uses the last baseline.
.box {
display: inline-flex;
flex-direction: column;
}
.first {
baseline-source: first;
}
.auto {
baseline-source: auto;
}
.last {
baseline-source: last;
}
{{EmbedLiveSample('baseline_selection_in_inline_flex_containers', '100%', 260)}}
{{Specifications}}
{{Compat}}