Question

样品：

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

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

我有两个问题，请：

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

Answer 1

您不想拉伸高度范围？
您有可能影响一个或多个弹性项目，而不是拉伸容器的整个高度。

要影响容器的所有弹性项目，请选择以下选项：
您必须将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项，则必须将align-self: flex-start;设置为此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-items上有一些文本，具有不同的字体大小，则可以使用第一行的基线垂直放置Flex项。具有较小字体大小的弹性项目在容器和顶部之间具有一些空间。使用flex-start，flex项将设置为容器的顶部（没有空格）。

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?

防止弹性物品拉伸

1 个答案: