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>