display:flex彈性布局--橫向分配空間

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