CSS Flex正在改变图像大小。

Question

我正在使用CSS flex对一系列3行的标志进行布局。它们除了最后一行中的两个标志比其他标志更深之外，大小都相同。

最后一行中的所有标志都被拉伸以达到相同的深度，即与更深的一对标志一样。

图像显示标志1、3和5已垂直拉伸。

请问如何停止这种情况。

    .brandLogos div{
      display:flex;
      display:-webkit-flex; 
      flex-flow: wrap;
      -webkit-flex-flow: wrap;
      -webkit-justify-content: space-between;
      justify-content: space-between;  
    }
    
    .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>

- maxelcat

---

你使用了 width="134" height="70" 属性，这会导致你的图片无论如何都会被拉伸。 - vivekkupadhyay

Answer 1

你需要设置 align-items: center;，默认值为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/

- SKeurentjes

Answer 2

在容器上使用align-items。

可能的值有：

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

stretch是默认值。

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

- Niek Nijland

Answer 3

你应该尝试的是将每个图像包装在一个 div 中，将图像设置为宽度 100%。Flexbox 只会应用于 div，不会拉伸任何标志。

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

- TheBilTheory