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

时间:2016-02-25 06:41:07

标签: css html5 flexbox

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

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

Here's my fiddle

Css for image holding div和它的孩子

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

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

正如您在示例中看到的图像高度未调整大小,我该如何解决此问题?

3 个答案:

答案 0 :(得分:0)

你到底想要做什么?你想让图像拉伸到父div的宽度吗?在这种情况下,这是你应该做的:

function getNumbers(str) {
    return str.split("")
        .filter(function(ch) { return /\d/.test(ch); })
        .map(function(ch) { return +ch; });
}

function division() {
    var numbers = getNumbers(document.getElementById("numbers").value);
    if (numbers[1] == 0) {
        throw new Error("Division by zero error");
    }
    return numbers[0] / numbers[1];
}

或者您希望图像拉伸到父级的宽度和高度?在这种情况下,您应该为图像添加100%的额外高度。

答案 1 :(得分:0)

将每个图像添加到单独的div中,并相应地更改样式

{{1}}

答案 2 :(得分:0)

尝试使用flex-direction: column;

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