当使用css flexBox时,三个主要的浏览器似乎在某些方面的行为完全不一样.
在这种情况下,我正在尝试创建一个图像网格：
<div class="container">
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
</div>
.container {
display:inline-flex;
flex-flow : column wrap;
align-content : flex-start;
height : 100%;
}
在这个例子中,我需要一个容器,它包含几个div元素,设置为从上到下流动,当它们到达底部时包装.最终为我提供了一列照片.
然而,我需要容器水平扩展以适应包装的元素：
行为如下：
> IE 11 – 正确的是,容器水平延伸以包裹每个包裹的元素列
> Firefox – 容器只包装第一列元素,其余的溢出.
> Chrome – 容器总是伸展以填补其父级的宽度,无论如何.
在这种情况下,我想在其他两个浏览器中实现IE11的行为.因此我的问题是,如何使一个flexBox容器水平扩展以匹配其列换行内容.
提前致谢.
解决方法
看来这个问题只能用CSS解决,所以我提出一个JQuery解决方案
容器宽度=最后一个孩子的位置 – 最后一个孩子的容器宽度的位置(包括边距)
代码：
$(document).ready(function() {
$('.container').each(function( index ) {
var lastChild = $(this).children().last();
var newWidth = lastChild.position().left - $(this).position().left + lastChild.outerWidth(true);
$(this).width(newWidth);
})
});
演示：
