0

[![enter image description here][1]][1] I have a table that requires flex due to it needing support for mobile use. I currently use flex justify-content: space-between; to give the three elements equal space; however since the data in the "rows" are uneven due to font, the center elements get shoved around. Is there a way to lock the center column in place?

As you can see the center column is slightly shoved, so is there a way to lock it in place?

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
Maffe
  • 71
  • 1
  • 8
  • 2
    justify-content: space-between doesn't give the 3 elements equal space - it divvies out the spare space equally as blank space between the elements. – A Haworth Feb 08 '22 at 15:13
  • Any reason not to use a 3 column grid instead? – A Haworth Feb 08 '22 at 19:19
  • Due to the table use mainly being two-fielded and taking in a lot of different data, it would be best for me to keep the solution and figuring a way to center the middle span element without being affected by the other span elements. – Maffe Feb 11 '22 at 11:21

1 Answers1

-1

I would personally look at the space-evenly value instead of space-between. But not sure if this breaks your CSS or something.

Kasper
  • 114
  • 8