Html 防止弹性项目拉伸

Prevent flex items from stretching

提问by Mori

Sample:

样本：

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

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

I have two questions, please:

我有两个问题，请教：

1. Why does it basically happen to the span?
2. What is the right approach to prevent it from stretching without affecting other flex items in a flex container?

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

回答by Sebastian Brosch

You don't want to stretch the span in height?
You have the possiblity to affect one or more flex-items to don't stretch the full height of the container.

您不想在高度上拉伸跨度？
您有可能影响一个或多个 flex-item 不拉伸容器的整个高度。

To affect all flex-items of the container, choose this:
You have to set align-items: flex-start;to divand all flex-items of this container get the height of their content.

要影响容器的所有弹性项目，请选择：
您必须设置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>

To affect only a single flex-item, choose this:
If you want to unstretch a single flex-item on the container, you have to set align-self: flex-start;to this flex-item. All other flex-items of the container aren't affected.

要仅影响单个 flex-item，请选择此选项：
如果您想在容器上取消拉伸单个 flex-item，则必须设置align-self: flex-start;为该 flex-item。容器的所有其他弹性项目不受影响。

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>

Why is this happening to the span?
The default value of the property align-itemsis stretch. This is the reason why the spanfill the height of the div.

为什么会发生这种情况span？
该属性的默认值align-items是stretch。这就是为什么要span填充div.

Difference between baselineand flex-start?
If you have some text on the flex-items, with different font-sizes, you can use the baseline of the first line to place the flex-item vertically. A flex-item with a smaller font-size have some space between the container and itself at top. With flex-startthe flex-item will be set to the top of the container (without space).

baseline和之间的区别flex-start？
如果您对柔性项一些文字，用不同的字体大小，您可以使用第一行的基线垂直放置柔性项。具有较小字体大小的 flex-item 在容器与其自身之间在顶部有一些空间。随着flex-startflex-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 baselineand flex-starthere:
What's the difference between flex-start and baseline?

您可以找到有关之间区别的详细信息baseline，并flex-start在这里：
什么是柔性启动和基线之间的区别？