防止弹性项目拉伸

Question

样本：

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

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

我有两个问题，请问：

为什么它基本上发生在 span 上？
在不影响弹性容器中其他弹性项目的情况下防止它拉伸的正确方法是什么？

Answer 1

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

要影响容器的所有弹性项目，请选择：
您必须将 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的区别?
如果您在弹性项目上有一些文本，具有不同的字体大小，您可以使用第一行的基线来垂直放置弹性项目。字体大小较小的弹性项目在顶部的容器和自身之间有一些 space。使用 flex-start 时，弹性项目将被设置到容器的顶部（没有 space）。

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:

Answer 2

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

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

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

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

防止弹性项目拉伸

Prevent flex items from stretching

html

css

flexbox