admin管理员组文章数量:1611396
当position: fixed; 遇到 display: flex;
给下面的元素添加css样式的时,
<div id="box" class="wrap">
<div class="item1"></div>
<div class="item2"></div>
</div>
我给父级元素"wrap"设置了display: flex;
我想让 item1 固定宽度,而 item2 可以随着 item1的宽度改变而自动充满剩余空间
此处我给 item1 固定宽度100px,给了 item2一个 flex: auto; 的css样式,效果非常好。
不过我又有了新的想法,想要给 item1 一个position: fixed; 样式,希望它能固定在屏幕中
当我添加了 fixed定位后,却发现 item1 脱离了flex布局的束缚, 而 item2 因为有 flex: auto; 则会自动占满父级空间
#box{
width: 400px;
height: 1000px;
border: 1px solid green;
margin: 0 auto;
}
.wrap{
display: flex;
flex-direction: row;
}
#box .item1{
width: 100px;
height: 50px;
background-color: black;
position: fixed;
}
#box .item2{
width: 100px;
height: 100px;
flex: auto;
background-color: green;
}
这是因为fixed定位会让元素脱离标准流,并且不会保留原始空间。
到这应该知道我想要的是做一个伸缩侧边导航栏的类似布局,显然这不是我期望看到的。
为实现我想要的效果,就不能给 item2 设置 fixed 定位样式,不过侧边导航栏没有固定定位肯定体验极差。怎么办呢?
思考了一番,我想到,给item1来一个子元素 item3 ,给 item3 样式设置为 fixed 定位
<div id="box" class="wrap">
<div class="item1">
<div class="item3"></div>
</div>
<div class="item2"></div>
</div>
.item3{
width: 50px;
height: 50px;
position: fixed;
background-color: red;
}
这样 item3 的固定定位肯定是不会影响到 flex 的布局的。不过想要实现侧边栏导航伸缩效果,我们还需要注意一些问题。
首先,我们不能寄希望于 item3 能够撑开 item1 ,因为 item3 在标准流中是没有空间的。所以 item1 的样式要随着伸缩而动态的改变宽度。
其次, item3 的定位 fixed 相对的父级是 body ,我们尽量不要给 item3 设定宽高为百分比,因为百分比宽高是相对于父级的。
最后奉上我的案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>document</title>
<style type="text/css">
#box{
width: 400px;
height: 300px;
border: 1px solid green;
margin: 0 auto;
}
.wrap{
display: flex;
flex-direction: row;
}
.item1{
width: 100px;
height: 50px;
background-color: black;
}
.item2{
width: 100px;
height: 100px;
flex: auto;
background-color: green;
}
.item3{
width: 100px;
height: 50px;
position: fixed;
background-color: red;
}
.open{
width: 100px;
}
.close{
width: 50px;
}
</style>
</head>
<body>
<button type="button" id="btn">收缩</button>
<div id="box" class="wrap">
<div class="item1" id="left">
<div class="item3" id="nav"></div>
</div>
<div class="item2"></div>
</div>
</body>
<script type="text/javascript">
var btn = document.getElementById('btn');
var nav = document.getElementById('nav');
var left = document.getElementById('left');
btn.onclick = (function(){
var isOpen = true;
return function(){
isOpen = !isOpen;
nav.className = isOpen?"item3 open":"item3 close";
left.className = isOpen?"item1 open":"item1 close";
btn.innerHTML = isOpen?"收缩":"展开"
}
})();
</script>
</html>
本文标签: fixedPositionflexDISPLAY
版权声明:本文标题:当position: fixed; 遇到 display: flex; 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1728604125a1165236.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论