display：flex 使用 功能太强大了吧

自学过flex布局，但是作为后端开发前端小白刚做需求时，总是不会使用，于是请教了大佬。

需求：

如下图所示，一共五个按钮，点击到哪个按钮哪个按钮就放大，其他四个保持较小的样式，并且对其他布局不会产生影响。

.btnWrapper{
      width: 700px;
      height: 40px;
      display: flex;
      align-items: center;
    }

    .btn_item{
      height: 100%;
      text-align: center;
      line-height: 40px;
      flex: auto;
      color: #ffffff;
      font-size: 20px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }

    .btn_item-grow {
      flex: 1 1 110px;
      height: 50px;
      line-height: 50px;
    }

<el-row style="margin-top: -10px">
                  <div id="wrapper" class="btnWrapper">
                    <div class="btn_item btn_item-grow" style="background-color: #007694;"  @click="choose(0)">表&nbsp;&nbsp;扬</div>
                    <div class="btn_item" style="background-color: #007FCA;"  @click="choose(1)">意&nbsp;&nbsp;见</div>
                    <div class="btn_item" style="background-color: #0062CB;"  @click="choose(2)">建&nbsp;&nbsp;议</div>
                    <div class="btn_item" style="background-color: #4014A8;"  @click="choose(3)">投&nbsp;&nbsp;诉</div>
                    <div class="btn_item" style="background-color: #BB6200;"  @click="choose(4)">举&nbsp;&nbsp;报</div>
                  </div>
                </el-row>

choose(index){
              this.chooseType = index;
              //console.log("-----------选择的类型是-----------： " + index);
               const list = document.getElementById("wrapper").children;
               for (let i=0;i<list.length;i++){
                  const element =list[i];
                 element.setAttribute('class',index === i ? 'btn_item btn_item-grow': 'btn_item')
               }
          }