源码

演示效果

分析思路

1. 使用flex布局，每个卡片的宽度都由flex进行灵活调整
2. 交互可以增加和删除active，来实现宽度扩增和恢复
3. 还需要使用transition进行动画过渡，使得平滑切换

核心代码

首先创建一个容器container，里面包含5个卡片，进行布局样式。

.container .card {
  height: 80vh;
  margin: 10px;
  position: relative;
  border-radius: 50px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  flex: 0.5;
  cursor: pointer;
  transition: all 700ms ease-in;
}

flex

flex是复合属性，复合了: flex-grow 、flex-shrink 、flex-basis 三个属性，默认值为0 1 auto。

flex-grow: 0.5：这表示当父容器有多余空间时，该flex项目将能够增长，但其增长能力是其他flex-grow值为1的项目的0.5倍。如果另一个flex项目的flex-grow值为1，那么当空间分配时，这个值为0.5的项目将只获得一半的空间增长量。

补充

• flex:1 1 auto ，简写： flex:auto
• flex:1 1 0 ，简写： flex:1
• flex:0 0 auto ，简写： flex:none
• flex:0 1 auto ，简写： flex:0 auto (flex 初始值)
• 非负数字，等同于 flex:非负数字 1 0% ，能放大也能缩小，数字代表占父级剩余尺寸份数
• 像素值，等同于 flex 1 1 像素值，能放大也能缩小，像素值代表容器在分配多余空间之前，子项所占的主轴空间。

我们一般用flex:数值来代表占父元素剩余尺寸的份数。

给具有active类的标签设置flex为5。

.container .card.active {
  flex: 5
}

交互可以使用js实现。获取所有卡片，forEach循环给卡片增加一个active类，在增加之前，需要先移除卡片已经有的active类，再进行添加。

这样做的好处是，原本已经扩增的卡片，可以恢复到原来的宽度，而点击增加active类的卡片，可以扩增。

const cards = document.querySelectorAll(".card");

cards.forEach((card) => {
  card.addEventListener("click", () => {
    removeActiveClass();
    card.classList.add("active");
  });
});
// 移除active类
function removeActiveClass() {
  cards.forEach((card) => {
    card.classList.remove("active");
  });
}

这里也可以做一个屏幕适配，使用媒体查询。当屏幕尺寸到达一个宽度，会有两个卡片进行隐藏。

/* 媒体查询 */
@media (max-width:580px) {
  .container {
    width: 100vw;
  }

  .card:nth-child(4),
  .card:nth-child(5) {
    display: none;
  }
}

总结

这是一个很初级的project，主要的是通过active类的增删，再结合flex布局来实现。

参考官方例子：github.com