如何跨浏览器实现一致的水平扩展 Flexbox 容器行为？

水平扩展 Flexbox 容器

问题

在 Flexbox 中，包含包装内容的容器的行为因浏览器而异。 IE 11 通过水平拉伸容器来包裹元素来表现出所需的行为，而 Firefox 和 Chrome 则表现出不一致。

解决方案

虽然浏览器缺乏列弹性容器的完整实现，但它们很好地支持写入模式。通过使用具有垂直写入模式的行弹性容器，容器的内联方向与块方向交换。 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>

此方法通过确保容器水平拉伸来模仿 IE 11 的行为以适应 Firefox 和 Chrome 中的包装内容。

以上是如何跨浏览器实现一致的水平扩展 Flexbox 容器行为？的详细内容。更多信息请关注PHP中文网其他相关文章！