当position: fixed；遇到 display: flex；

最新推荐文章于 2024-07-11 22:36:37 发布

brokenmile

最新推荐文章于 2024-07-11 22:36:37 发布

阅读量1.9k

点赞数 2

分类专栏：前端学习之路文章标签： html css 定位 flex

本文链接：https://blog.csdn.net/brokenmile/article/details/113445229

版权

前端学习之路专栏收录该内容

4 篇文章 0 订阅

订阅专栏

当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;
			}

item1: 黑色,item2：绿色
这是因为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:红色
这样 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>

brokenmile

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
当position: fixed；遇到 display: flex；

当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的宽度改变而自动充满
复制链接

扫一扫