在实际开发项目当中经常会遇到需要不同的栏目以手风琴的形式切换（即鼠标移到哪个块儿上哪个块儿变宽，其余的块儿变窄）

实现效果

实现代码

html代码（结构为一个大盒子banners里面有3个小盒子banner，小盒子banner内为具体内容）

    <div class="banners">
        <div class="banner">
        <img src="image/1.jpg" alt="">
        <div>
        <h1>商品展示1</h1>
        </div>
        </div>
        <div class="banner">
            <img src="image/2.jpg" alt="">
            <div>
                <h1>商品展示1</h1>
            </div>
        </div>
        <div class="banner">
            <img src="image/1.jpg" alt="">
            <div>
                <h1>商品展示1</h1>
            </div>
        </div>
    </div>

css代码

.banners{
    display: flex;
    width: 100%;
    padding: 4% 2%;
    box-sizing: border-box;
    height: 100vh;
}
.banner{
    flex: 1;					//第二个详细解释
    overflow: hidden;
    transition: .5s;
    margin: 0 2%;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
    line-height: 0;
}

.banner > img {
    width: 200%;
    height: calc(100% - 10vh);
    -o-object-fit: cover;			
    object-fit: cover;			//第一个详细解释
    transition: .5s;
}
.banner:hover {
    flex: 1 1 50%;
}

.banner:hover > img {
    width: 100%;
    height: 100%;
}

实现原理

鼠标移入之前图片大小为宽200%,高calc(100% - 10vh),banner为flex:1;移入之后宽100%，高100%,banner为flex: 1 1 50%;

详细解释

一、object-fit: cover; （参考文章CSS3 ------- object-fit属性）
由于图片的尺寸大小不一，所以需要前端来进行控制，否则整个布局会乱，但是如果设定固定的宽和高，会造车图片的变形，而css的object-fit属性可以解决这个问题（用来指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框）
下面是没有设置object-fit: cover和设置了object-fit: cover的对比图


二、CSS flex 属性
1.flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
2.flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
3.属性详解
flex-grow: 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。