Css flexbox：如果图像较高，则居中对齐；如果文本较高，则从flex开始

想象一下，一个站点组件的左边是文本，右边是图像，它随页面宽度而变化。图像不会缩放，但文字宽度是流动的。文本内容可以更改。我正在使用flexbox来实现这一点

例如：

乱数假文
多洛·塞特·艾米特是一位杰出的献身者，他是一位临时劳工和职业经理人。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责

main{
显示器：flex；
对齐项目：居中；
/*调整项目：灵活启动*/
宽度：50%；
保证金：0自动；
背景：浅灰色；
填料：2米；
}
h1，p{
保证金：0；
}
h1+p{
边缘顶部：1米；
}

查看下面的示例

在较小的屏幕宽度上，当文本较高时，我希望文本和图像在顶部对齐<代码>对齐项目：灵活启动将执行此操作。在更宽的屏幕上，当图像高度高于文本时，我希望两个元素垂直居中，如

align items:center可以

是否有一种干净的方法（无JS）根据哪个元素更高，在两条路线之间自动切换？
在写这个问题时，我想到了解决方案：-）

很简单，幸运的是，只需添加：

.image{
页边距底部：自动；
}
在写这个问题时，我想到了解决办法：-）

很简单，幸运的是，只需添加：

.image{
页边距底部：自动；
}