CSS中基线、首个基线和末个基线之间的差异是什么?

inkz8wg9  于 2023-01-10  发布在  其他
关注(0)|答案(2)|浏览(167)

CSS属性align-items可以设置为baselinefirst baselinelast baselineCSS Spec)。这些值之间有什么区别?

.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 class="flex-container">
  <div class="flex-item item1">flex-start</div>
  <div class="flex-item item2">baseline</div>
  <div class="flex-item item3">first baseline</div>
  <div class="flex-item item4">last baseline</div>
</div>
whhtz7ly

whhtz7ly1#

first baselinebaseline是同义词。
"第一个"和"最后一个"指的是弹性项目中的行框。最好的理解方法是使用一个示例:

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 class="first">
  <div>alpha<br>beta<br>gamma</div>
  <div>delta<br>epsilon<br>zeta<br>eta</div>
  <div>iota</div>
  <div class="baseline-indicator"></div>
</section>
<hr>
<section class="last">
  <div>alpha<br>beta<br>gamma</div>
  <div>delta<br>epsilon<br>zeta<br>eta</div>
  <div>iota</div>
  <div class="baseline-indicator"></div>
</section>

我们可以从红线中看到,对于first baseline,第一个文本行的基线(即"alpha"、"delta"、"ι")是对齐的。
而对于last baseline,最后文本行的基线(即,"gamma"、"eta"、"ι")是对齐的。

uplii1fm

uplii1fm2#

对齐所有Flex项,使其Flex容器基线对齐。其交叉起始边距边缘与基线之间距离最大的项与行的交叉起始边缘齐平。
第一条基线是从Flex容器最开始的Flex线的共享对齐基线生成的。最后一条基线是从Flex容器最末端的Flex线生成的。
来自CSS灵活框布局模块1级草稿
为了使Flex容器本身参与基线对齐(例如,当Flex容器本身是外部Flex容器中的Flex项时),它需要提交最能代表其内容的基线位置。为此,Flex容器的基线确定如下(按顺序重新排序后,并考虑Flex方向):
当Flex容器的内联轴与其主轴匹配时,其基线确定如下:如果Flex容器最开始/最结束Flex行上的任何Flex项目参与基线对齐,则Flex容器的第一个/最后一个主轴基线集将从这些Flex项目的共享对齐基线生成。
否则,如果Flex容器至少有一个Flex项,则Flex容器的第一个/最后一个主轴基线集将从最开始/最结束Flex项的对齐基线生成。(如果该项没有与Flex容器主轴平行的对齐基线,则首先从其边界边缘合成一个对齐基线。)
否则,flex容器没有第一个/最后一个主轴基线集,如果需要,将根据其对齐上下文的规则合成一个主轴基线集。
当Flex容器的内联轴与其横轴匹配时,其基线确定如下:如果Flex容器至少有一个Flex项,则Flex容器的第一个/最后一个横轴基线集将从最开始/最结束Flex项的对齐基线生成。(如果该项没有与Flex容器横轴平行的对齐基线,则首先从其边界边缘合成一个对齐基线。)
否则,Flex容器没有第一个/最后一个跨轴基线集,如果需要,将根据其对齐上下文的规则合成一个跨轴基线集。
当根据上述规则计算基线时,如果构成基线的框具有允许滚动的溢出值,则必须将该框视为处于其初始滚动位置,以便确定其基线。
https://drafts.csswg.org/css-flexbox-1/#flex-baselines

相关问题