防止弹性项目拉伸

Question

示例：

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

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

我有两个问题，请：

1. 为什么span基本上会发生这种情况？
2. 在不影响 flex 容器中其他 flex 项的情况下，防止它拉伸的正确方法是什么？

Answer 1

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

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

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-item 在容器和其顶部之间有一些空间。使用flex-start，flex-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 之间区别的更多信息：
What's the difference between flex-start and baseline?

Answer 2

Sebastian Brosch 已经给了一个很棒的answer。这是另一种方法：
margin-bottom: auto

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

span {
  background: red;
  margin-bottom: auto;
}

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