html - 防止 flex 元素拉伸(stretch)

Question

样本:

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

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

请问我有两个问题:

1. 为什么它基本上发生在 span 上？
2. 在不影响 flex 容器中其他 flex 元素的情况下防止它拉伸(stretch)的正确方法是什么？

Answer 1

您不想在高度上拉伸(stretch)跨度？
您有可能影响一个或多个 flex 元素，使其不会拉伸(stretch)容器的整个高度。

要影响容器的所有 flex 元素，请选择:
您必须将 align-items: flex-start; 设置为 div 并且此容器的所有 flex 元素都获得其内容的高度。

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

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

要仅影响单个 flex 元素，请选择:
如果你想在容器上取消拉伸(stretch)单个 flex 元素，你必须设置 align-self: flex-start; 到这个 flex 元素。容器的所有其他 flex 元素不受影响。

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 元素上有一些文本，具有不同的字体大小，您可以使用第一行的基线来垂直放置 flex 元素。字体大小较小的 flex 元素在顶部的容器和自身之间有一些空间。使用 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>

You can find more information about the difference between baseline and flex-start here:
What's the difference between flex-start and baseline?