如何自动缩放FlexBox(列)[复制]

你不想把跨度拉大吗?
您可能会影响一个或多个弹性项,使其不会拉伸容器的整个高度。

要影响容器的所有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项,请选择以下选项:
如果要在容器上取消拉伸单个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 . 这就是为什么 跨度 填充的高度 div .

差异 baseline 和 flex-start ?
如果flex项上有一些字体大小不同的文本,可以使用第一行的基线垂直放置flex项。字体较小的flex项在容器顶部和自身之间有一些空间。用 柔性启动 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>

你可以找到更多关于 基线 和 柔性启动 在这里:
What's the difference between flex-start and baseline?