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

flexbox：如果图像更高，则对齐中心；如果文本更高，则以flex-start对齐

1 个答案: