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

要影响容器的所有弹性项目，请选择以下选项：
您必须设置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>

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

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>