Flexbox - 在项

Question

在flexbox项目中为一个元素提供相同的高度是没有问题的，但我无法使用多个项目。

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

你会看到前两个项目的工作原理应该是：h2标题具有相同的高度。但是，如果内容低于标题的内容具有可变高度，则此功能不再有效，就像最后两项一样。

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

感谢您的帮助。

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;
}

Answer 1

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

Answer 2

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

h2 {
  flex-basis: 2em;
}

Example