如何让 Flexbox 容器水平扩展以包裹内容？

如何水平扩展 Flexbox 容器以包裹内容？

使用 CSS Flexbox 时，浏览器会表现出不同的行为，特别是在容器大小调整的情况下。为了解决这种不一致问题，我们寻求一种解决方案，使 Flexbox 容器水平扩展以容纳其包装的内容。

在某些情况下，可能需要一个容器包含以列布局排列的多个 div 元素。目标是使这些元素能够垂直流动，到达底部时环绕，从而形成文本或图像列。然而，控制容器的水平扩展以匹配包装的元素仍然是一个挑战。

为了实现所需的行为，可以利用具有垂直写入模式的行弹性容器。通过这样做，内联和块方向相反，导致弹性项目垂直流动。因此，对齐的书写模式在 Flex 项目中被反转，恢复水平对齐。

有关实际演示，请考虑以下代码片段：

.container {
  display: inline-flex;
  writing-mode: vertical-lr; /* Reverses inline and block directions */
  flex-wrap: wrap;
  align-content: flex-start;
  height: 350px;
  background: blue;
}

.photo {
  writing-mode: horizontal-tb; /* Restores horizontal alignment */
  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 容器水平扩展以包裹内容？的详细内容。更多信息请关注PHP中文网其他相关文章！