防止弹性项目拉伸 [英] Prevent flex items from stretching

问题描述

示例:

div {显示:弹性；高度:200px；背景:棕褐色；}跨度 {背景:红色；}

<span>这是一些文字.</span>

我有两个问题，请问:

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

解决方案

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

要影响容器的所有弹性项目，请选择:
您必须将 align-items: flex-start; 设置为 div 并且此容器的所有 flex-item 都获得其内容的高度.

div {对齐项目:flex-start；背景:棕褐色；显示:弹性；高度:200px；}跨度 {背景:红色；}

<span>这是一些文字.</span>

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

div {显示:弹性；高度:200px；背景:棕褐色；}span.only {背景:红色；align-self:flex-start;}跨度 {背景:绿色；}

<span class="only">这是一些文字.</span><span>这是更多的文字.</span>

为什么 span 会发生这种情况?
属性align-items 的默认值为stretch.这就是span填充div高度的原因.

baseline 和 flex-start 的区别?
如果您在 flex-items 上有一些文本，具有不同的字体大小，您可以使用第一行的基线垂直放置 flex-item.具有较小字体大小的 flex-item 在容器与其自身之间在顶部有一些空间.使用 flex-start 将 flex-item 设置为容器的顶部(没有空格).

div {对齐项目:基线；背景:棕褐色；显示:弹性；高度:200px；}跨度 {背景:红色；}跨度字体大小{字体大小:2em；}

<span class="fontsize">这是一些文字.</span><span>这是更多的文字.</span>

<块引用>

您可以在此处找到有关 baseline 和 flex-start 之间区别的更多信息:
flex-start 和基线有什么区别?

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?

解决方案

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.

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

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.

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-items is stretch. This is the reason why the span fill the height of the div.

Difference between baseline and 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-start the flex-item will be set to the top of the container (without 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:
What's the difference between flex-start and baseline?

这篇关于防止弹性项目拉伸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！