The CSS property align-items can be set to baseline, first baseline, and last baseline (CSS Spec). What are the differences between these values?
.flex-container {
color: white;
display: flex;
width: 300px;
height: 200px;
background-color: yellow;
}
.flex-item {
background-color: green;
width: 50px;
min-height: 100px;
margin: 10px;
}
.item1 {
align-self: flex-start;
}
.item2 {
align-self: baseline;
}
.item3 {
align-self: first baseline;
}
.item4 {
align-self: last baseline;
}<div >
<div >flex-start</div>
<div >baseline</div>
<div >first baseline</div>
<div >last baseline</div>
</div>CodePudding user response：
first baseline and baseline are synonyms.
"First" and "last" refer to the line boxes within the flex items. The best way to understand is with an example:
section {
display: flex;
flex-wrap: wrap;
position: relative;
}
.first {
align-items: first baseline;
}
.last {
align-items: last baseline;
}
div {
flex: 1;
}
div:nth-child(2) {
font-size: 2.5em;
}
hr {
width: 80%;
}
/* to depict where the relevant baseline is */
section .baseline-indicator {
position: absolute;
border-bottom: 1px solid red;
width: 100%;
}
.first .baseline-indicator {
top: 36px;
}
.last .baseline-indicator {
top: 173px;
}<section >
<div>alpha<br>beta<br>gamma</div>
<div>delta<br>epsilon<br>zeta<br>eta</div>
<div>iota</div>
<div ></div>
</section>
<hr>
<section >
<div>alpha<br>beta<br>gamma</div>
<div>delta<br>epsilon<br>zeta<br>eta</div>
<div>iota</div>
<div ></div>
</section>We can see from the red lines that with first baseline, the baselines of the first text rows (i.e. "alpha", "delta", "iota") are aligned.
And with last baseline, the baselines of the last text rows (i.e. "gamma", "eta", "iota") are aligned.
CodePudding user response：
All flex items are aligned such that their flex container baselines align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line.
First baseline is generated from shared alignment baseline of the flex container's startmost flex line. Last baseline from the flex container's endmost flex line.
From CSS Flexible Box Layout Module Level 1 Draft
In order for a flex container to itself participate in baseline alignment (e.g. when the flex container is itself a flex item in an outer flex container), it needs to submit the position of the baselines that will best represent its contents. To this end, the baselines of a flex container are determined as follows (after reordering with order, and taking flex-direction into account):
When the inline axis of the flex container matches its main axis, its baselines are determined as follows: If any of the flex items on the flex container’s startmost/endmost flex line participate in baseline alignment, the flex container’s first/last main-axis baseline set is generated from the shared alignment baseline of those flex items.
Otherwise, if the flex container has at least one flex item, the flex container’s first/last main-axis baseline set is generated from the alignment baseline of the startmost/endmost flex item. (If that item has no alignment baseline parallel to the flex container’s main axis, then one is first synthesized from its border edges.)
Otherwise, the flex container has no first/last main-axis baseline set, and one is synthesized if needed according to the rules of its alignment context.
When the inline axis of the flex container matches its cross axis, its baselines are determined as follows: If the flex container has at least one flex item, the flex container’s first/last cross-axis baseline set is generated from the alignment baseline of the startmost/endmost flex item. (If that item has no alignment baseline parallel to the flex container’s cross axis, then one is first synthesized from its border edges.)
Otherwise, the flex container has no first/last cross-axis baseline set, and one is synthesized if needed according to the rules of its alignment context.
When calculating the baseline according to the above rules, if the box contributing a baseline has an overflow value that allows scrolling, the box must be treated as being in its initial scroll position for the purpose of determining its baseline.