使用 justify-content: space between [duplicate] 在不同大小的元素之间添加等量的空间

Question

[![在此处输入图像描述][1]][1] 我有一张需要 flex 的桌子，因为它需要支持移动使用。我目前使用 flex justify-content: space-between;给三个元素相等的空间；然而，由于“行”中的数据由于字体的原因是不均匀的，所以中心元素会被推来推去。有没有办法将中柱锁定到位？

如您所见，中心柱被轻微推了一下，那么有没有办法将其锁定到位？

CSS:'

        .UsageOverview__detailsRecord {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: $space-xxxs $space-xs;
         

          .UsageOverview__detailsRecordName {
            font-weight: $font-weight-bold;
          }

          .UsageOverview__detailsRecordValue {
            font-weight: 400;
            text-align: right;
          }

          .UsageOverview__detailsPriceValue {
            font-weight: 400;
            text-align: center;
          }

HTML：

 <div repeat.for="record of usage.currentPeriod" class="UsageOverview__detailsRecord">
                      <span class="UsageOverview__detailsDateValue">
                        <template if.bind="dateRange === 'year'">
                          ${record.fromTime | date:'MMMM'}
                        </template>
                        <template if.bind="dateRange === 'month'">
                          ${record.fromTime | date:'DD.'}
                        </template>
                        <template if.bind="dateRange === 'day'">
                          ${record.fromTime | date:'HH:00'}
                        </template>
                      </span>
                      <span class="UsageOverview__detailsDataValue">
                        ${getTablePriceValue(record) & signal:'force-refresh-signal'}
                      </span>
                      <span class="UsageOverview__detailsRecordValue">
                        ${getTableDataValue(record) & signal:'force-refresh-signal'}
                      </span> ```


  [1]: https://i.stack.imgur.com/D8Fl8.jpg

Answer 1

我个人会查看space-evenly 值而不是space-between。但不确定这是否会破坏您的 CSS 或其他内容。