使用 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中文网其他相关文章！
