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>