css - flexbox:如果图像较高则居中对齐，如果文本较高则 flex-start

Question

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

例子:

<main>
  <div class="text">
    <h1>Lorem ipsum</h1>
    <p>Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
  <div class="image">
    <img src="https://placeimg.com/300/200/any">
  </div>
</main>

main {
  display: flex;
  align-items: center;
/*   align-items: flex-start; */
  width: 50%;
  margin: 0 auto;
  background: lightgray;
  padding: 2em;
}

h1, p {
  margin: 0;
}

h1 + p {
  margin-top: 1em;
}

在 https://codepen.io/marcvangend/pen/xModrN 查看此示例.

在较小的屏幕宽度上，当文本较高时，我希望文本和图像在顶部对齐。 align-items: flex-start; 会这样做。在更宽的屏幕上，当图像高度高于文本时，我希望两个元素都垂直居中，如 align-items: center; 那样。

是否有一种干净的方法(无 JS)可以根据哪个元素更高在两种对齐方式之间自动切换？

Answer 1

在写这个问题时，我想到了解决方案:-)

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

.image {
  margin-bottom: auto;
}