使用flexbox将内容与不同大小的图像垂直对齐

Question

如果我的一张图像的高度低于其他图像，我如何实现垂直对齐。同时重新排列＆lt; 768px设备。

Codeply

.order-flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.order-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 250px;
}

.order-image {
  padding-bottom: 50px;
}

@media (max-width: 768px)   {
    .order-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        min-height: 80px;
        min-width: 450px;
    }

    .order-flex {
        flex-direction: column;
    }
}

Answer 1

这是布局的顶部。我想你现在可以自己弄清楚底部了。

.order-flex {
  display: flex;
}

.order-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  min-height: 200px;
  max-width: 120px;
}

.order-image {
  padding-bottom: 50px;
}

.txt {
  text-transform: uppercase;
}

<div class="order-flex">
  <div class="order-wrapper">
    <img src="http://placehold.it/100x50" />
    <div class="txt">text</div>
  </div>
  <div class="order-wrapper">
    <img src="http://placehold.it/100" />
    <div class="txt">text</div>
  </div>
  <div class="order-wrapper">
    <img src="http://placehold.it/100" />
    <div class="txt">text</div>
  </div>
</div>