使用百分比值填充flexbox项目

Question

我在Google Chrome中使用flexbox(仅支持此浏览器)来创建动态布局.我在一个div元素中有n个子元素,它们应该以相同的比例共享整个空间.由于新推出的柔性盒,这种方法没有问题.但我还必须将每个内部div的高度设置为0.如果我想将此div内的元素拉伸到100%高度,则使用给定值0而不是任何计算值.由于我选择了弹性盒以防止使用javascript,我宁愿保持这种方式.有没有其他方法可以使图像的高度填充div？

以下是代码(仅在Google Chrome中测试过):

HTML

<div class="flexbox">
    <div><img src="chrome-logo.png" /></div>
    <div><img src="chrome-logo.png" /></div>
    <div><img src="chrome-logo.png" /></div>
    <div><img src="chrome-logo.png" /></div>
</div>

CSS

            .flexbox {
                display:-webkit-box;
                -webkit-box-orient:vertical;
                height:300px;
                width:200px;
            }
            .flexbox > div {
                -webkit-box-flex:1;
                height:0;
                border:solid 1px #000000;
            }
            .flexbox > div > img {
                height:100%;
            }

要在浏览器中观看的代码

Answer 1

好吧,经过几个小时的研究,我得到了它.要做的是以下更改:

.flexbox {
            display:-webkit-box;
            -webkit-box-orient:vertical;
            height:300px;
            width:200px;
        }
        .flexbox > div {
            -webkit-box-flex:1;
            height:0;
            border:solid 1px #000000;
            position:relative; /* CHANGE */
        }
        .flexbox > div > img {
            height:100%;
            position:absolute; /* CHANGE */
        }

如果您对此感兴趣,可以通过ChromeDevTools对css进行这些更改,您将看到正确的结果!