如何显示：flex容器随包装内容水平扩展？ [英] How can I make a display:flex container expand horizontally with its wrapped contents?

问题描述

当使用css flexbox 时，三个主要浏览器在某些区域显示的行为完全不同。

When using css flexbox the three main browsers appear to behave entirely differently in certain areas.

case我试图创建一个网格的图像：

In this case I am trying to create a grid of images:

<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 元素设置为从上到下流动，当它们到达底部时包装。

In this example I need a container, itself containing several div elements set up to flow from top to bottom and wrapping when they reach the bottom. Ultimately providing me with columns of photos.

但是我需要容器水平扩展以适应包装的元素：

However I need the container to expand horizontally to accommodate the wrapped elements:

以下是一个快速的 jsFiddle 演示。

Here is a quick jsFiddle to demonstrate.

行为如下：

• IE 11 - 正确的是，容器水平伸展， / li>
  
• Firefox - 容器只包装第一列元素，其余部分溢出。


• - 容器总是伸展以填充其父项的宽度。

• IE 11 - Correct, the container stretches horizontally to wrap each column of wrapped elements
• Firefox - The container only wraps the first column of elements, with the rest overflow out.
• Chrome - The container always stretches to fill the width of its parent, whatever that may be.

喜欢在其他两个浏览器中实现IE11的行为。因此我的问题是，如何使 flexbox 容器水平扩展以匹配其列wrap 内容。

In this instance I would like to achieve the behaviour of IE11 in the other two browsers. Therefore my question is, how can I make a flexbox container expand horizontally to match its column wrap contents.

提前感谢。

推荐答案

看来这个问题无法解决CSS，所以我建议你一个JQuery解决方案

It seems this issue cannot be solved only with CSS, so I propose you a JQuery solution

container width =最后一个孩子的位置+容器的位置+最后一个孩子的宽度（包括边距）

container width = position of the last child - position of the container + width of the last child (including margin)

代码：

$(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);
    })
});

演示：

http://jsfiddle.net/qzea320L/

这篇关于如何显示：flex容器随包装内容水平扩展？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！