在设计网页时，有时会需要加入图片集供浏览，这时如果想要制作一些特殊的Hover效果，就可以参考利用Flexbox特性做出来的伸缩效果，比如：

让我们一起来看看如何实现吧！

步骤一：

首先先建立出图片集中各个图片区块：

<div class="gallery-wrap">
    <div class="item item-1"></div>
    <div class="item item-2"></div>
    <div class="item item-3"></div>
    <div class="item item-4"></div>
    <div class="item item-5"></div>
</div>

步骤二：

接着设定css样式，首先是最外层的gallery-wrap：

.gallery-wrap {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 150px;
}

需要先将外层利用display:flex; 变成弹性盒子的属性，如此一来他的子元素就会变成弹性项目。

而在flex-direction: row的部分，则是宣告他的子元素排列的方向如下：

步骤三：

再来设定每个子项目的CSS样式：

.item {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: none;
  transition: flex 0.8s ease;
  
  &:hover{
    flex: 7;
  }
}

在这边的flex属性介绍如下：

• flex 是缩写，里面依序包含三个属性 flex-grow、flex-shrink 和 flex-basis，如果只设定一个则是 flex-grow。
• flex-grow: 元件的伸展性，是一个数值，当空间分配还有剩余时的当前元件的伸展性，预设值为，如果设置为0 则不会缩放。 
• flex-shrink: 元件的收缩性: 元件的伸展性，是一个数值，当空间分配还不足时的当前元件的收缩性，预设值为，如果设置为0 则不会缩放。 
• flex-basis: 元件的基准值，可使用不同的单位值。

因此flex的数值越大，所占比例会越多，在此例子中初始状态皆为flex:1，而当hover时变为flex:7，因此就能创作出hover时弹性伸缩的效果！

步骤四：

最后只需要再将个区块放入喜欢的图片就完成啦！（这里示例只是区分不同区块的背景颜色）

.item-1 {
	background: #007aff;
}
.item-2 { 
	background: #4cd964;
}
.item-3 { 
	background: #f0ad4e;
}
.item-4 { 
	background: #dd524d;
}

链接: https://www.fly63.com/article/detial/11467