css flex正在改變圖像大小

Question

我正在使用css flex來佈置一系列3行徽標。它們的尺寸與最後一行中的兩個尺寸相差較大。

最後一行中的所有徽標都被拉伸爲相同的深度，即深度對的深度。

圖像顯示，標識1,3和5已經被垂直拉伸

如何停止這個請。

.brandLogos div{ 
 
     display:flex; 
 
     display:-webkit-flex; \t 
 
     flex-flow: wrap; 
 
     -webkit-flex-flow: wrap; 
 
     -webkit-justify-content: space-between; 
 
     justify-content: space-between; \t 
 
    } 
 
    
 
    .brandLogos img { 
 
     border:1px solid green; 
 
     margin-right:10px; 
 
     margin-bottom:30px; 
 
    }

 
 
    <div class="brandLogos"> 
 
    <div> 
 
    .. 10 previous images 
 
     <img src="/uploads/2017/03/santander.jpg" alt="santander logo" width="134" height="70" /> 
 
     <img src="/uploads/2017/03/Sony.jpg" alt="" width="134" height="119" /> 
 
     <img src="/uploads/2017/03/talktalk.jpg" alt="talktalk logo" width="134" height="70" /> 
 
     <img src="/uploads/2017/03/unilever.jpg" alt="unilever logo" width="134" height="119" /> 
 
     <img src="/uploads/2017/03/Warburtonslogo.jpg" alt="warburtons logo" width="134" height="70" /> 
 
    </div> 
 
    </div>

Answer 1

您需要設置​​，默認爲stretch

例

.brandLogos div{ 
    display:flex; 
    display:-webkit-flex; 
    flex-flow: wrap; 
    -webkit-flex-flow: wrap; 
    -webkit-justify-content: space-between; 
    justify-content: space-between; 
    align-items: center; 
    -webkit-align-items: center; 
} 

更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

在容器上使用align-items。

可能的值有：

• flex-start
• flex-end
• center
• baseline

stretch是默認的。

FYI： http://devdocs.io/css/align-items

Answer 3

你應該嘗試是包裝e ach圖像在div中，將圖像設置爲寬度100％。 Flexbox僅適用於divs，並且不會延伸徽標。

<div class="logo-item"> 
<img src="/uploads/2017/03/santander.jpg" alt="santander logo" width="134" height="70" /> 
</div>