align-items：baseline和align-items：flexstart显示没有区别

Question

align-items的基线值和flex-start值之间没有任何变化。我无法区分这两个值，因为两者的工作原理相同。我用来区分基准线和flex-start的代码是：

div {
  border-right: 1px solid #ff0;
  width: 12vh;
  background-color: orange;
}

.container div:nth-child(1) {
  height: 100px;
}

.container div:nth-child(2) {
  height: 50px
}

.container {
  height: 130px;
  border: 2px solid red;
  display: flex;
}

#st {
  flex-direction: row;
  align-items: baseline;
}

#nd {
  flex-direction: row;
  align-items: flex-start;
}

<section class=container id=st>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</section>
<section class=container id=nd>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</section>

基线和弹性启动之间有什么区别。如果您想回答我的问题，请编辑我的代码以使基准线和flex-start显示出差异非常有用

Answer 1

在这种特定情况下，视觉效果是相同的，因为每个对齐方式的参考都相同。这是一个更好理解的插图：

如您所见，基线是由内部文本定义的。由于您使用的是相同的字体系列，字体大小，行高等，并且您只有一行文本，因此3个框的基线是相同的，因此结果与flex-start相同。

例如，通过增加字体大小来更改一个元素的基线，您会注意到其中的区别：

<Style TargetType="controls:CustomControl">
    <Setter Property="BorderThickness" Value="{Binding Thickness, Source={StaticResource settings}}"/>
</Style>

div {
  border-right: 1px solid #ff0;
  width: 12vh;
  background-color: orange;
}

.container div:nth-child(1) {
  height: 100px;
}

.container div:nth-child(2) {
  height: 50px;
  font-size: 25px;
}

.container {
  height: 130px;
  border: 2px solid red;
  display: flex;
}

#st {
  flex-direction: row;
  align-items: baseline;
}

#nd {
  flex-direction: row;
  align-items: flex-start;
}