结构
<div class="container">
<div class="item"></div>
<div class="item item-1"></div>
<div class="item"></div>
<div class="item item-3"></div>
<div class="item"></div>
</div>
样式
.container {
display: flex;
}
.item {
flex: 1;
height: 200px;
background-color: #d7d7d7;
transition: all .3s;
}
.item:hover {
flex: 3;
}
.item-1 {
background-color: #666;
}
.item-3 {
background-color: #333;
}
效果
鼠标浮上调整flex项目的占比即可