如何使一个弹性项目不填补弹性容器的高度？

正如您在下面的代码中看到的，flex 容器中的左 div 延伸到达右 div 的高度。是否可以设置一个属性使其高度成为保存其内容所需的最小值(就像通常在 Flex 容器之外的 height: auto div 一样) ？

#a {
display: flex;
}
#a > div {
background-color: red;
padding: 5px;
margin: 2px;
}
#b {
height: auto;
}
<div id="a">
<div id="b">left</div>
<div>right<br>right<br>right<br>right<br>right<br></div>
</div>

165520 次浏览
小开
最佳答案

align-items或 align-content属性分别控制这种行为。

align-items定义了物品从 垂直的到 flex-direction的定位。

默认的 flex-direction是 row，因此可以用 align-items控制垂直放置。

还有一个 align-self属性用于控制每个项目的对齐方式。 

#a {
display:flex;


align-items:flex-start;
align-content:flex-start;
}


#a > div {
  

background-color:red;
padding:5px;
margin:2px;
}
#a > #c {
align-self:stretch;
}
<div id="a">
  

<div id="b">left</div>
<div id="c">middle</div>
<div>right<br>right<br>right<br>right<br>right<br></div>
  

</div>

Css 技巧有一个很好的 文章的主题

小开

当您创建一个 Flex 容器时，各种各样的默认 Flex 规则开始发挥作用。

其中两个默认规则是 flex-direction: row和 align-items: stretch。这意味着 flex 项将自动排列在一行中，每个项将填充容器的高度。

如果你不希望弹性项目拉伸，例如，像你写的:

使其高度成为保持其内容所需的最低限度

然后用 align-items: flex-start覆盖默认值。

#a {
display: flex;
align-items: flex-start; /* NEW */
}
#a > div {
background-color: red;
padding: 5px;
margin: 2px;
}
#b {
height: auto;
}
<div id="a">
<div id="b">left</div>
<div>
right<br>right<br>right<br>right<br>right<br>
</div>
</div>

下面是来自 软盒规格的示例，它突出显示了 align-items的五个值以及它们如何在容器中定位 flex 项。如前所述，stretch是默认值。

enter image description here 来源: < a href = “ http://www.w3.org/TR/css-flebox- 1/# 价值链-项目-属性”rel = “ noReferrer”> W3C


提交答案