防止伸缩项目从拉伸

样本: 

div {
display: flex;
height: 200px;
background: tan;
}
span {
background: red;
}
<div>
<span>This is some text.</span>
</div>

我有两个问题:

  1. 为什么它基本上发生在 span上？
  2. 什么是正确的方法，以防止它伸展而不影响其他项目在一个伸缩容器？
172274 次浏览
小开
最佳答案

你不想把跨度拉高吗？
您可能会影响一个或多个伸缩项目，以避免拉伸容器的整个高度。

若要影响容器中的所有 flex-item，请选择:
您必须将 align-items: flex-start;设置为 div，并且该容器的所有 flex-item 都将获得其内容的高度。

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-item 上有一些文本，其字体大小不同，那么可以使用第一行的基线垂直放置 flex-item。字体较小的 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之间差异的信息:
Flex-start 和基线之间的区别是什么？

小开

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>


提交答案