Question posted in 
Is there a way with this flex layout to get the scores to line up correctly without using a table? The highlighted parts should be lined up as above and below correctly, but since 9 has less length then 15, the columns look uneven. Is there away to accomplish this with flex outside of a table?
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width:400px">
<div class="card-header text-center d-flex justify-content-center">
<div class="mr-1 flex-shrink-0" style="min-width:0" data-bind="html: TimeFormatted">3:10 PM EDT</div><div class="d-flex text-truncate">@<span class="text-truncate mx-1">Wabash Valley Family Sports Center</span> (<span>Larry Wilson Court</span>)</div>
</div>
<div class="card-body">
<div class="d-flex">
<div class="text-truncate mr-auto">
<a target="_blank" href="/157555/fall-volleyball-league/teams/team-christner?divisionteamid=1591685">Team Christner</a><span data-bind="visible: AwayTeamExhibition" style="display: none;">*</span>
</div>
<div class="d-flex">
<span class="final-score">1</span>
<span class="other-score font-weight-normal ml-2">14</span>
<span class="other-score font-weight-normal ml-2">25</span>
<span class="other-score font-weight-normal ml-2">9</span>
</div>
</div>
<div class="d-flex font-weight-bold">
<div class="text-truncate mr-auto">
<a target="_blank" href="/157555/fall-volleyball-league/teams/team-mikuly?divisionteamid=1591686">Team Mikuly</a><span
style="display: none;">*</span>
</div>
<div class="d-flex">
<span class="final-score">2</span>
<span class="other-score font-weight-normal ml-2">25</span>
<span class="other-score font-weight-normal ml-2">12</span>
<span class="other-score font-weight-normal ml-2">15</span>
</div>
</div>
</div>
<div class="card-footer d-flex">
<div class="text-truncate mr-auto"><span>3rd-5th Grade</span>, <span>Pool A</span></div>
<div class=""">Final</div>
</div>
<div class="card-footer text-center">
<a target="_blank" title="Directions" href="http://maps.apple.com/maps?daddr=39.4564711,-87.2602811" class="btn btn-sm btn-dark"><i class="fa fa-map-marker"></i></a>
</div>
</div>
4
Answers
give the score a
min-width(orwidth) equal to two numbersas like Temani Afif advice you can use min-width for scores, and you can also use min-width for the whole div and use justify-content as space-evenly. But please note that if you are dynamic score, and the width is greater than the min-width it will not align evenly in this answer.
Don’t need to write custom css property if you are using Bootstrap-4 there is predefine classes for width like class w-50 means width: 50% and if you want transfer element to right side then use class justify-content-end in display flex.
You can use the grid.
Make the card body a container then use rows and columns like you see in the snippet. I set the name column to
.col-6to take up half the width and the score columns to just.colto take up even amount of remaining space. I also gave the score columns.text-rightand.text-monospaceto ensure the the columns of numbers also line-up across the rows.