overflow为什么无效

最新推荐文章于 2024-06-07 11:41:33 发布

xh-code

最新推荐文章于 2024-06-07 11:41:33 发布

阅读量1.8w

点赞数 1

分类专栏： web前端文章标签： javascript css html5

本文链接：https://blog.csdn.net/qq_37207413/article/details/106517129

版权

web前端专栏收录该内容

15 篇文章 2 订阅

订阅专栏

问题：为什么在display：flex下，overflow不起作用？

解决方法：

使用display：box，display： box是一种古老的写法，现在基本废弃，可用display: -webkit-box; 兼容

使用flex布局：flex布局的默认值，子元素有flex-shrink：1，在这个默认值下，子元素的宽是不管用的。将子元素加上flex-shrink：0；

移动端问题：

安卓和iOS浏览器都是webkit内核，包括变态UC浏览器，对flex支持并不好，但却都支持古老的display：webkit-box；所以在这种情况下，要使用box布局。所以移动端的一定要加浏览器前缀！！display: -webkit-box;

display: -webkit-box;可伸缩框属性（Flexible Box）

css3新添加的盒子模型属性做到真正的流体布局

更多请参考css3

overflow

overflow 属性规定当内容溢出元素框时发生的事情

display 、flex

display 属性规定元素应该生成的框的类型

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性display:flex 是一种弹性布局布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持

overflow:auto的潜在布局隐患
1.滚动条会占用容器尺寸，原本和谐的布局，可能因为滚动条出现后发生问题（尽量使用自适应布局，或者预留滚动条的宽度）
2.水平居中跳动的问题（滚动条出现时，水平居中是内容会发生移动，这样页面切换时，会产生内容上的跳动感）

简单示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
 .boxes{
            width: 500px;
            height: 400px;
            display:-webkit-box;
            overflow-x: auto;
            flex-direction: row;
            border: 1px solid black;
        }
 .boxes>div{
            width: 200px;
            height: 300px;
            border: 1px solid red;
        }
 </style>
</head>
<body>
<div class="boxes" id="boxes">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div id="val"></div>
</body>
<script type="text/javascript">
 //监听滚动条滚动
    //获取对象
 var boxes=document.getElementById("boxes");
    boxes.addEventListener("scroll", function (e) {
 console.log(JSON.stringify(e));
        var w=boxes.scrollLeft;
        document.getElementById("val").innerHTML="滚动距离："+w+"总长度："+boxes.scrollWidth;
    });
</script>
</html>

xh-code

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
overflow为什么无效

问题：为什么在display：flex下，overflow不起作用？解决方法：使用display：box，display： box是一种古老的写法，现在基本废弃，可用display: -webkit-box; 兼容使用flex布局：flex布局的默认值，子元素有flex-shrink：1，在这个默认值下，子元素的宽是不管用的。将子元素加上flex-shrink：0；移动端问题：安卓和iOS浏览器都是webkit内核，包括变态UC浏览器，对flex支持并不好，但却都支持古老的displa.
复制链接

扫一扫

专栏目录