如何使 display:flex 容器水平扩展其包装的内容？

一尘不染

如何使 display:flex 容器水平扩展其包装的内容？

javascript

使用 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内容。

提前致谢。

阅读 111

2022-06-21

共1个答案

一尘不染

奇怪的是，大多数浏览器都没有正确实现列 flex 容器，但对写入模式的支持相当不错。

因此，您可以使用具有垂直书写模式的 row 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>

这种方法在极端情况下可能有其自身的错误，尤其是当您混合使用浮动和嵌套弹性框等高级布局技术时。但在大多数情况下，它似乎工作正常。

2022-06-21