Css 使用flex使所有行在不同的列中具有相同的高度？

我正在尝试制作一个产品项目页面，在该页面中，您可以连续查看3个项目，并且每个细节都从相同的高度开始

它还必须具有响应能力，因此在手机上，您可以看到项目1、2和3

如何使图像1、2和3在一条线上，使它们与图像2的高度相同

.flexbox{
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
弯曲方向：立柱；
背景:#5656；
填充物：5px；
对齐内容：之间的空间；
证明内容：之间的空间；
溢出：隐藏；
}
.flexbox分区{
文本对齐：居中；
填充：20px0；
保证金：5px；
}
.flexbox.左{
背景色：#D30058；
}
.flexbox.center{
背景色：#36ABE1；
}
.flexbox.对{
背景色：#23B776；
}
@介质（最小宽度：768px）{
.flexbox{
flex-flow：行nowrap；
}
.flexbox分区{
宽度：33.33%！重要；
}
}

标题1

副标题1（简称）

图1

价格1

标题2

子标题2
（这可能是一个很长的标题，可能超过两行或三行）

图2

价格2

标题3

副标题3（简称）

图3

价格3

将.flexbox div->flex也设置为

.flexbox div {
  display: flex;
  justify-content: space-between;
  flex-direction: column;

.flexbox{
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
弯曲方向：立柱；
背景:#5656；
填充物：5px；
对齐内容：之间的空间；
证明内容：之间的空间；
溢出：隐藏；
}
.flexbox分区{
显示器：flex；
证明内容：之间的空间；
弯曲方向：立柱；
文本对齐：居中；
填充：20px0；
保证金：5px；
}
.flexbox.左{
背景色：#D30058；
}
.flexbox.center{
背景色：#36ABE1；
}
.flexbox.对{
背景色：#23B776；
}
@介质（最小宽度：768px）{
.flexbox{
flex-flow：行nowrap；
}
.flexbox分区{
宽度：33.33%！重要；
}
}

标题1

副标题1（简称）

图1

价格1

标题2

子标题2
（这可能是一个很长的标题，可能超过两行或三行）

图2

价格2

标题3

副标题3（简称）

图3

价格3

将.flexbox div->flex也设置为

.flexbox div {
  display: flex;
  justify-content: space-between;
  flex-direction: column;

.flexbox{
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
弯曲方向：立柱；
背景:#5656；
填充物：5px；
对齐内容：之间的空间；
证明内容：之间的空间；
溢出：隐藏；
}
.flexbox分区{
显示器：flex；
证明内容：之间的空间；
弯曲方向：立柱；
文本对齐：居中；
填充：20px0；
保证金：5px；
}
.flexbox.左{
背景色：#D30058；
}
.flexbox.center{
背景色：#36ABE1；
}
.flexbox.对{
背景色：#23B776；
}
@介质（最小宽度：768px）{
.flexbox{
flex-flow：行nowrap；
}
.flexbox分区{
宽度：33.33%！重要；
}
}

标题1

副标题1（简称）

图1

价格1

标题2

子标题2
（这可能是一个很长的标题，可能超过两行或三行）

图2

价格2

标题3

副标题3（简称）

图3

价格3

在当前设置下，您所要求的不能100%完成这些元素彼此都不了解，所以为什么它们要相对均匀地对齐？或者更准确地说，如何使用flexbox，您必须在外部父级上定义高度，并使用CSS网格管理长元素。这很容易做到，但html中的更改是必须的，因为尚未实现。使用CSS网格也是一个很好的解决方案，只是这并不能在手机上提供正确的视图，所以我想我选择flexbox解决方案。或者它可以通过CSS网格来完成，这样我就可以把所有的彩色项目放在一起了吗？我一直在寻找flexbox解决方案，有没有可能为标题设置一个固定的高度？现在每行将占用大约75像素（300/4）但我希望我的标题具有最大40px的高度。你可以使用我为了演示而移除的媒体的高度/宽度做任何你想做的事情。你所要求的不能在当前设置下100%完成。这些元素彼此都不了解，所以为什么它们要相对均匀地对齐？或者更准确地说，如何使用flexbox，您必须在外部父级上定义高度，并使用CSS网格管理长元素。这很容易做到，但html中的更改是必须的，因为尚未实现。使用CSS网格也是一个很好的解决方案，只是这并不能在手机上提供正确的视图，所以我想我选择flexbox解决方案。或者它可以通过CSS网格来完成，这样我就可以把所有的彩色项目放在一起了吗？我一直在寻找flexbox解决方案，有没有可能为标题设置一个固定的高度？现在每行将占用大约75像素（300/4）但我希望我的标题的最大高度为40px。你可以使用我为了演示而移除的媒体的高度/宽度做任何你想做的事情。仍然不是100%准确如果你添加边框，你可以看到它，然后给每个元素一定的高度。仍然不是100%准确如果你添加边框，你可以看到它，然后给每个元素一定的高度。