如何使 Flexbox 容器水平扩展以容纳打包内容？

Flexbox 容器如何水平扩展

Flexbox 提供对页面元素的布局和对齐方式的细微控制。一项挑战在于如何使弹性盒容器水平扩展以容纳包装的内容物。浏览器在这方面表现出不同的行为，需要特定的解决方案。

考虑所需的图像网格：

.container {
  display: inline-flex;
  flex-flow: column wrap;
  align-content: flex-start;
  height: 100%;
}

尽管指定了列换行，Firefox 仍将容器的宽度限制为第一列的元素，而 Chrome 会将其扩展到父级的宽度，而不管内容如何。要实现 IE11 的行为，需要采用替代方法。

利用写入模式

浏览器通常都很好地支持写入模式。写入模式允许交换块方向和内联方向，从而实现弹性项目的垂直流动。在flex items内部，可以恢复水平书写模式。

.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;
}

通过将容器的书写模式设置为vertical-lr，并在flex items中应用writing-mode:horizo​​ntal-tb，可以有效实现垂直流动和水平扩展。该解决方案与浏览器对书写模式的支持保持一致，并满足水平扩展 Flexbox 容器的特定要求。

以上是如何使 Flexbox 容器水平扩展以容纳打包内容？的详细内容。更多信息请关注PHP中文网其他相关文章！