防止弹性物品拉伸

Question 1

样品：

div {
  display: flex;
  height: 200px;
  background: tan;
}
span {
  background: red;
}

<div>
  <span>This is some text.</span>
</div>

我有两个问题，请：

Question 2

您不想拉伸高度跨度吗？
您有可能影响一个或多个弹性项目以不拉伸容器的整个高度。

要影响容器的所有弹性项目，请选择以下选项：
您必须设置align-items: flex-start;为，div并且此容器的所有弹性项目都将获取其内容的高度。

div {
  align-items: flex-start;
  background: tan;
  display: flex;
  height: 200px;
}
span {
  background: red;
}

<div>
  <span>This is some text.</span>
</div>

要仅影响单个弹性项目，请选择以下选项：
如果要在容器上取消拉伸单个弹性项目，则必须设置align-self: flex-start;为此弹性项目。容器的所有其他弹性项目均不受影响。

div {
  display: flex;
  height: 200px;
  background: tan;
}
span.only {
  background: red;
  align-self:flex-start;
}
span {
    background:green;
}

<div>
  <span class="only">This is some text.</span>
  <span>This is more text.</span>
</div>

为什么会发生这种情况span？
该属性的默认值align-items是stretch。这就是为什么span填充高度的原因div。

baseline和之间的区别flex-start？
如果弹性项目上有一些带有不同字体大小的文本，则可以使用第一行的基线垂直放置弹性项目。具有较小字体大小的弹性项目在容器及其顶部之间具有一定的空间。使用flex-startflex-item会将其设置在容器的顶部（无空间）。

div {
  align-items: baseline;
  background: tan;
  display: flex;
  height: 200px;
}
span {
  background: red;
}
span.fontsize {
  font-size:2em;
}

<div>
  <span class="fontsize">This is some text.</span>
  <span>This is more text.</span>
</div>

您可以找到有关之间区别的详细信息baseline，并flex-start在这里：
什么是柔性启动和基线之间的区别？