如何使 display:flex 容器与其包裹的内容水平展开?

问题描述

当使用 css flexbox 时，三个主要浏览器在某些方面的表现似乎完全不同.

在这种情况下，我试图创建一个图像网格:

<div class="photo"></div><div class="photo"></div><div class="photo"></div><div class="photo"></div><div class="photo"></div><div class="photo"></div>
.容器 {显示:inline-flex；flex-flow : 列包装；对齐内容:弹性启动；高度:100%；}

在这个例子中，我需要一个容器，它本身包含几个 div 元素，这些元素设置为从上到下流动并在到达底部时包装.最终为我提供了照片列.

但是我需要容器水平扩展以容纳包裹的元素:

这是一个快速的 jsFiddle 演示.

行为如下:

• IE 11 - 正确，容器水平拉伸以包裹每一列包裹元素
• Firefox - 容器只包装第一列元素，其余元素溢出.
• Chrome - 容器总是伸展以填充其父级的宽度，无论是什么.

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

提前致谢.

解决方案

这个问题似乎不能只用 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);})});

演示:

http://jsfiddle.net/qzea320L/

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

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%;
}

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:

Here is a quick jsFiddle to demonstrate.

The behaviour is as follows:

• 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.

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.

Thanks in advance.

解决方案

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

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

Code :

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

Demo :

http://jsfiddle.net/qzea320L/

这篇关于如何使 display:flex 容器与其包裹的内容水平展开?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！