display:flex弹性布局--横向分配空间

?

1 2 3 4 5 6 7 8

<div style="display: flex;flex-direction: row;align-content: center;margin-top: 20px;">        <!--      <p style="flex: 2">设置科目类型时长</p>-->        <!--      <span style="flex: 3;margin-top: 15px">注意:设置各科目类型总时长不能大于设置的总训练时长</span>-->        <span style="flex: 4;">总训练目标时长:  {{train_time}}分钟</span>        <span style="flex: 4;">已分配  {{success_time}}分钟</span>        <span style="flex: 4;" v-if="train_time > success_time">剩余  {{train_time-success_time}}分钟未分配</span>        <span style="flex: 4;" v-else-if="train_time === success_time">恭喜你完成分配!</span>      </div>