首页 > web前端 > css教程 > 如何使 Flexbox 容器水平扩展并跨浏览器封装内容?

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

DDD
发布: 2024-11-07 12:27:02
原创
814 人浏览过

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

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板