v-for遍历元素样式失效

要实现一下效果布局： 

对于多个盒子并排，通常会用到flex布局，css如下：

  .friends {
    display: flex;
    justify-content: space-between;
    padding-top: 3.41rem;
    padding-left: 0.73rem;
    width: 6.1rem;

    .item {
      overflow-x: scroll;

      .photo {
        width: 1.2rem;
        height: 1.2rem;
      }

      .name {
        width: 1.13rem;
        height: 0.39rem;
      }
    }
  }

关键是给谁设置 display：flex ！！

结构错误写法：给v-for那层的盒子加样式

         <div>
          <div
            class="friends"
            v-for="(item,index) of friends"
            :key="index"
          >
            <div class="item">
              <div
                v-image.normal="item.photo"
                class="photo"
              />
              <div class="name">
                {
   { item.name }}
              </div>
            </div>
          </div>
        </div>

结构正确写法：在v-for外层再套一个盒子设置样式

        <div class="friends">
          <div
            v-for="(item,index) of friends"
            :key="index"
          >
            <div class="item">
              <div
                v-image.normal="item.photo"
                class="photo"
              />
              <div class="name">
                {
   { item.name }}
              </div>
            </div>
          </div>
        </div>