Invalid V-for traversal element style

To realize the effect layout ： 

For multiple boxes side by side , It's usually used flex Layout ,css as follows ：

  .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;
      }
    }
  }

The key is who to set display：flex ！！

Structural error ： to v-for Add style to the box on that floor

         <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>

Correct writing of structure ： stay v-for The outer layer is covered with a box to set the style

        <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>