防止弹性项目拉伸

Posted 2023-03-05

【中文标题】防止弹性项目拉伸

【英文标题】：Prevent flex items from stretching

【发布时间】：2016-02-26 12:06:08

【问题描述】：

示例：

div 
  display: flex;
  height: 200px;
  background: tan;

span 
  background: red;

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

我有两个问题，请：

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

【参考方案1】：

您不想延长跨度的高度吗？ 您可以影响一个或多个弹性项目以不拉伸容器的整个高度。

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

要仅影响单个弹性项目，请选择以下内容： 如果你想在容器上展开单个弹性项目，你必须将align-self: flex-start; 设置为这个弹性项目。容器的所有其他弹性项目不受影响。

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-start，flex-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>

您可以在此处找到有关baseline 和flex-start 之间区别的更多信息：What's the difference between flex-start and baseline?

【讨论】：

感谢您的回答，但它会影响所有弹性项目。还有一个问题：baseline 和 flex-start 值之间有什么区别？他们的结果似乎是一样的。它们在某种情况下会有所不同吗？

看起来很棒！如果您能告诉我baseline 和flex-start 值之间的区别，我将不胜感激。

What's the difference between baseline and flex-start?

提示：如果你想水平对齐它们，只需使用align-items: center; :)

#Hack : 用一个新的 div 包裹你的元素。这将拉伸新的父 div 并使您的元素保持不变。

【参考方案2】：

Sebastian Brosch 已经给了一个很棒的answer。这是另一种方法：margin-bottom: auto

div 
  display: flex;
  height: 200px;
  background: tan;


span 
  background: red;
  margin-bottom: auto;

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