显示flex子项以自动调整大小以适合父元素

Question

我想为图像制作一个列表，并调整它们的大小以适应窗口，如果添加更多，不扩展父div。

可以使用css display:flex选项或任何其他方式完成吗？

Here's my fiddle

Css为图像持有div和它的孩子

.images{
    background:rgba(14, 11, 10, 0.8);
    display:flex;
    flex:10;
}

.images > img{
     flex:1;
     max-width:100%;
     max-height:100%;
}

正如您在示例中看到的图像高度没有调整大小，我该如何解决这个问题？

Answer 1

你究竟想在这做什么？你想让图像拉伸到父div的宽度吗？在这种情况下，这是你应该做的：

.images{
    background:rgba(14, 11, 10, 0.8);
    display:block;
    flex:10;
}
.images img{
    width:100%;
}

或者你想让图像伸展到父母的宽度和高度？在这种情况下，您应该为图像添加100％的额外高度。

Answer 2

在单独的div中添加每个图像，并相应地更改样式

.images img{
  flex:1;
  max-width:100%;
  max-height:100%;
}

Answer 3

尝试使用flex-direction: column;

.images{
  background:rgba(14, 11, 10, 0.8);
  display:flex;
  flex-direction: column;
  flex:10;
}