css实现手风琴效果

结构

  <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项目的占比即可