want to achieve this effect

Note: the left and right sides are fixed

v-for

4:

25%

if you set the margin, there is also one end that cannot be aligned.
the style of my elastic box.

<div class="box">
     <div v-for="item in classes" class="inBox">
            <a href="-sharp"> {{item.name}}</a>
     </div>
</div>

.box{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .inBox{
          font-size: 18px;
          a{
            color: rgb(145,145,145);
          }
        }
      }

can you use only styles to achieve the effect of figure 1?