如何实现跨浏览器的包裹 Flex 项目一致的水平扩展？-css教程-PHP中文网

如何实现跨浏览器的包裹 Flex 项目一致的水平扩展？

Patricia Arquette

发布： 2024-11-10 01:26:02

原创

488 人浏览过

How to Achieve Consistent Horizontal Expansion for Wrapped Flex Items Across Browsers?

用于包装内容的水平扩展 Flex 容器

使用 CSS Flexbox 时，浏览器可能会对某些属性表现出不同的行为。特别是，创建按列排列的图像网格并允许它们换行可能会给跨浏览器实现一致的行为带来挑战。

考虑以下 HTML 代码：

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

登录后复制

以及随附的CSS：

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

登录后复制

容器的目标是水平扩展以容纳包装的元素，提供带有图像列的网格状布局。但是，正如您在提供的 jsFiddle 中可能遇到的那样，浏览器行为有所不同：

IE 11: 容器水平扩展，包裹每一列元素。
Firefox： 仅第一列元素被包裹，其余元素溢出。
Chrome： 容器始终拉伸以填充其父级的宽度。

要解决这种不一致问题并实现 IE 11 中观察到的行为，请实现以下解决方案：

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

登录后复制

此方法利用具有垂直书写模式的行伸缩容器。通过交换块方向和内联方向，弹性项目被迫垂直流动。然后，各个 Flex 项目中的书写模式将重置为水平。因此，容器将水平扩展以匹配包装的内容，模仿 IE 11 中观察到的行为。

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