今天在写项目的时候，在思考怎么实现把一个图片列表中的点击过的图片隐藏之后，在其下面的图片位置自动更新，后来想到了flex这个神奇的CSS属性。
flex + 最大/最小宽高度
先来看一个简单的代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.par {
width:100%;
/*height:100vh;*/
height:600px;
border:1px solid red;
display: flex;
flex-direction: column;
}
.child {
width:100%;
border:1px solid blue;
flex:1;
max-height:150px;
}
</style>
</head>
<body>
<div class = "par">
<div class="child">技术妃加送傲气而不计算机课徐1</div>
<div class="child">技术妃加送傲气而不计算机课徐2</div>
<div class="child">技术妃加送傲气而不计算机课徐3</div>
<div class="child">技术妃加送傲气而不计算机课徐4</div>
</div>
<script type="text/javascript">
var child = document.querySelectorAll(".child");
for(let i=0;i<child.length;i++)
child[i].onclick = function(event) {
child[i].style.display = 'none'
}
</script>
</body>
</html>
效果如下：
2020-04-27_23-43-37.gif
可以看到当我点击元素时，元素隐藏后，其他元素自动会补上它的空位。
这里给每个子元素设置flex：1的意思是，不设置高度，这些子元素平分父元素的高度值。
这里可能有人有疑惑，如果我给它加上一个高度值，比如：height:100px，他的结果是什么样呢？ flex的优先级比height的优先级高。
这里为了让一个元素消失后，其他元素的高度不发生变化，加入了max-height，这样就可以让元素既自动补位又不至于宽高发生变化。
如果你想设置高度为相对单位的话，可以设置vh这样的相对单位，（对于父元素高度不确定的元素，设置%无效），结果仍然相同。
2020-04-27_23-56-17.gif
感慨一句
CSS真是太强了！！！！：）
网友评论