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>

baseline 和 flex-start 有什么区别。如果您想回答我的问题，编辑我的代码以使基线和 flex-start 显示差异非常有帮助

Answer 1

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

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

例如通过增加 font-size 来改变一个元素的基线，你会注意到不同之处：

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;
}

<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>