如何使 Flexbox 容器水平扩展并跨浏览器封装内容？-css教程-PHP中文网

如何使 Flexbox 容器水平扩展并跨浏览器封装内容？

DDD

发布： 2024-11-07 12:27:02

原创

834 人浏览过

How to Make a Flexbox Container Expand Horizontally with Wrapped Content Across Browsers?

使用包装内容水平扩展 Flexbox 容器

Flexbox 为创建灵活的布局提供了强大的解决方案。但是，浏览器行为可能会出现差异，从而导致意外结果。当尝试使 Flexbox 容器与其包装的内容水平扩展时，就会出现这样的问题。

考虑以下 HTML 和 CSS 代码：

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

登录后复制

此代码旨在创建一个从上到下流动的图像网格，当它们到达底部时会环绕。但是，浏览器行为有所不同：

IE 11：容器扩展以成功容纳包装的元素。
Firefox：仅包装第一个元素列，其他元素溢出。
Chrome:容器始终填充其父级的宽度。

要在其他浏览器中实现所需的行为，请考虑利用具有垂直书写模式的行弹性容器。

.container {
  display: inline-flex;
  writing-mode: vertical-lr;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 350px;
  background: blue;
}

登录后复制

<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>

登录后复制

通过将块方向与内联方向交换，Flex 项目垂直流动。恢复 Flex 项目内的水平书写模式即可完成解决方案。该技术允许创建水平扩展的 Flexbox 容器，以在浏览器中以一致的方式匹配其列换行内容。

以上是如何使 Flexbox 容器水平扩展并跨浏览器封装内容？的详细内容。更多信息请关注PHP中文网其他相关文章！