使用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>