本文介绍了如何利用CSS的flex属性来实现图片列表中点击隐藏图片后，下方图片自动更新位置的效果。通过设置flex: 1，使得元素能平分父元素高度，同时结合max-height避免高度变化，确保布局的灵活性。
今天在写项目的时候，在思考怎么实现把一个图片列表中的点击过的图片隐藏之后，在其下面的图片位置自动更新，后来想到了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(".c
最低0.47元/天 解锁文章
扫一扫
128
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
