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%; }
此代码旨在创建一个从上到下流动的图像网格,当它们到达底部时会环绕。但是,浏览器行为有所不同:
要在其他浏览器中实现所需的行为,请考虑利用具有垂直书写模式的行弹性容器。
.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中文网其他相关文章!