Flexbox - 在项目内垂直对齐未知高度的元素[重复]答案

【问题标题】：Flexbox - Align elements of unknown height vertically inside items [duplicate]Flexbox - 在项目内垂直对齐未知高度的元素[重复]
【发布时间】：2017-02-06 15:34:04
【问题描述】：

在 flexbox 项目中给 一个元素 相同的高度是没有问题的，但我无法让它与多个项目一起使用。

小提琴：https://jsfiddle.net/no9jkj7m

您会看到，对于前 2 个项目，它可以正常工作：h2 标题具有相同的高度。但是，如果标题下方的内容具有可变高度（如最后 2 项），则此方法不再起作用。

最后 2 项的标题应具有相同的高度，并且图像应与顶部对齐（标题下方没有间距）。

感谢您的帮助。

ul {
    display: flex;
}
li {
    box-sizing: border-box;
    display: flex; 
    padding: 15px;
    width: 50%;
}
.inner {
    background-color: #FAFAFA;
    display: flex;
    flex-direction: column;
    padding: 10px;
    width: 100%;
}
h2 {
    flex: 1 1 auto;
}

【问题讨论】：

如果没有 Javascript，这是不可能的。没有 CSS 机制来均衡不共享父元素的元素的高度。

标签： css flexbox

【解决方案1】：

尝试从您的<h2> 中删除flex 并添加flex-basis: 2em

h2 {
  flex-basis: 2em;
}

Example

【讨论】：

【解决方案2】：

移除“flex: 1 1 auto;”从h2。因为您设置了 flex 选项，所以您的 h2 元素会调整其高度并增大尺寸，从而将图像向下推。你可以在这里找到详细的解释：https://developer.mozilla.org/ru/docs/Web/CSS/flex

【讨论】：

当我这样做时，标题将不再具有相同的高度。所有项目的高度应相同，并且图像应显示在标题之后。