防止弹性物品拉伸

Question

样品:

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

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

我有两个问题,请:

Answer 1

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

影响集装箱的所有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>

要仅影响单个弹性项目,请选择以下选项:
如果要取消拉伸容器上的单个弹性项目,则必须设置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-items上有一些文本,具有不同的字体大小,则可以使用第一行的基线垂直放置Flex项.具有较小字体大小的弹性项目在容器和顶部之间具有一些空间.随着flex-start柔性项将被设置到容器的顶部(无空格).

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此处之间差异的更多信息:
flex-start和baseline之间有什么区别？

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>