如何进行显示:flex容器水平展开并包裹内容？

Question

使用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元素,设置为从顶部到底部流动,并在它们到达底部时包裹.最终为我提供了一系列照片.

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

这是一个快速的jsFiddle来演示.

行为如下:

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

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

提前致谢.

Answer 1

很奇怪大多数浏览器都没有正确实现列弹性容器,但是对写入模式的支持相当不错.

因此,您可以使用具有垂直书写模式的行flex容器.这将使块方向与内联方向交换,因此flex项将垂直流动.然后,您只需要恢复弹性项目内的水平书写模式.

.container {
  display: inline-flex;
  writing-mode: vertical-lr;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 350px;
  background: blue;
}
.photo {
  writing-mode: horizontal-tb;
  width: 150px;
  height: 100px;
  background: red;
  margin: 2px;
}

<div class="container">
  <div class="photo">1</div>
  <div class="photo">2</div>
  <div class="photo">3</div>
  <div class="photo">4</div>
  <div class="photo">5</div>
  <div class="photo">6</div>
  <div class="photo">7</div>
  <div class="photo">8</div>
  <div class="photo">9</div>
</div>

这种方法在边缘情况下可能有自己的缺陷,特别是如果您混合高级布局技术(如浮动和嵌套的Flexbox).但对于大多数情况,它似乎工作正常.

Answer 2

看来这个问题不能用CSS解决,所以我建议你使用JQuery解决方案

container width =最后一个子节点的位置 - 容器的位置+最后一个子节点的宽度(包括边距)

代码:

$(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/

Answer 3

规范说你正在做的事情应该有效,但是除了Internet Explorer/Edge之外,它在每个主要浏览器中都被错误地实现,这使得inline-flex column大多数开发人员目前无法使用多行布局.这是一个Chromium错误报告,提供了一个与您的实例完全相同的示例,并指出它在Chrome,Safari和Firefox中呈现错误.

spec中的参数比我能理解的更复杂,但关键是Flexible Box Layout Module Level 1规范定义了flex容器的内在交叉大小(即Flex容器的固有高度flex-direction: row或者Flex容器内部交叉大小flex-direction: column部分中的Flex容器的固有宽度.在那里,它说:

对于多线 柔性容器,最小内容/最大内容 交叉尺寸是柔性线交叉尺寸的总和

也就是说,flex-direction: columnFlex容器的固有宽度应该是其列宽度的总和,正如您所期望的那样.(比这更复杂,我不明白这一点,但我相信上述内容大致正确.)但是,Chrome,Firefox和Safari都错误地计算了这个宽度; 设置width: min-content或在Chrome中width: max-content的column wrap flex框中,您可以清楚地看到宽度设置为最宽的单个元素的宽度.

存在一种特定于Chrome的特定解决方法,但最好避免使用.在修复错误之前,Flexbox模型的这一部分根本不能按设计工作,并且没有可用的干净解决方案.