如何使display：flex容器及其包装的内容物水平展开？

小编典典

如何使display：flex容器及其包装的内容物水平展开？

html

使用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- 容器仅包装元素的第一列，其余元素溢出。
镀铬 -容器始终会拉伸以填充其父容器的宽度，无论大小如何。

在这种情况下，我想在其他两种浏览器中实现IE11的行为。因此，我的问题是，如何使flexbox容器水平扩展以匹配其column wrap内容。

提前致谢。

阅读 404

2020-05-10

共1个答案

小编典典

似乎仅靠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);
    })
});

2020-05-10