css3 的display:box无法换行布局?

发布于 2022-09-01 22:49:57 字数 81 浏览 5 评论 0

使用display:box给父元素布局,按教程上的-webkit-box-lines: multiple;
换行,但是布局无法换行该如何解决?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

梦醒时光 2022-09-08 22:49:58

boxflex的自动换行布局兼容性非常差。box在我的所有浏览器都无法换行,flex在比较新的chrome里倒是可以换行

我为君王 2022-09-08 22:49:57

之前就说过了 disply: -webkit-box 会存在这个问题,虽然有 box-lines 这个属性,但是支持旧语法的浏览器都没有实现它,这就是使用 flex 布局时需要考虑的一点。可以考虑使用 float 加一些高级选择器来降级处理。

补充一点,我之前遇到这个问题时,是配合 Modernizr 来处理的。 在不支持标准 flex 布局的浏览器中,Modernizr 会给 <html> 标签添加 no-flexbox 的类名,然后我们就可以在样式文件中进行自定义了,如:

.nav {
    display: flex;
    flex-wrap: wrap;
}

.no-flexbox .nav {
    display: block;
}

.no-flexbox .nav__item {
    float: left;
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文