使用flexbox垂直对齐不同尺寸的图像

Question

如果我的图像中有一个的高度低于其他高度，我该如何实现垂直对齐。还重新安排内容< 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>