Bootstrap flex colonnes de largeur égale sans tableau HTML

Question

Y a-t-il un moyen avec cette disposition flex pour aligner correctement les scores sans utiliser de tableau ? Les parties en surbrillance devraient être alignées correctement ci-dessus et ci-dessous, mais comme 9 a moins de longueur que 15, les colonnes semblent inégales. Y a-t-il un moyen d'accomplir cela avec flex en dehors d'un tableau ?

        15:10 PM EDT@Wabash Valley Family Sports Center (Larry Wilson Court)

                    Équipe Christner*

                1
                14

                25

                9

                    Équipe Mikuly*

                2

                25

                12

                15

        3rd-5th Grade, Pool A
        Final

Answer 1

Donnez au score une largeur minimale (ou une largeur) égale à deux nombres

[class*="score"] {
  min-width:2ch;
  text-align:right;
}

        15:10 HAE@Wabash Valley Family Sports Center (Larry Wilson Court)

                    Équipe Christner*

                1
                14

                25

                9

                    Équipe Mikuly*

                2

                25

                12

                15

        3ème à 5ème année, Pool A
        Final

Answer 2

Comme l'avis de Temani Afif, vous pouvez utiliser min-width pour les scores, et vous pouvez également utiliser min-width pour l'ensemble de la div et utiliser justify-content comme space-evenly. Mais veuillez noter que si vous avez un score dynamique, et que la largeur est supérieure à la min-width, il ne s'alignera pas correctement dans cette réponse.

.score{
  min-width:100px;
  justify-content:space-evenly;
}

        15h10 HAE@Wabash Valley Family Sports Center (Larry Wilson Court)

                    Équipe Christner*

                1
                14

                25

                9

                    Équipe Mikuly*

                2

                25

                12

                15

        3e-5e année, Groupe A
        Final

Answer 3

Ne pas besoin d'écrire une propriété CSS personnalisée si vous utilisez Bootstrap-4 il y a des classes prédéfinies pour la largeur comme la classe w-50 signifie width: 50% et si vous voulez déplacer l'élément vers le côté droit alors utilisez la classe justify-content-end dans l'affichage flex.

        3:10 PM HAE@Centre sportif familial de Wabash Valley (Tribunal Larry Wilson)

                Équipe Christner*

                1
                14
                25
                9

                Équipe Mikuly*

                2
                25
                12
                15

        3e-5e année, Groupe A
        Final

         Carte

Answer 4

Vous pouvez utiliser la grille.

Transformez le corps de la carte en conteneur, puis utilisez des lignes et des colonnes comme indiqué dans l'extrait de code. J'ai défini la colonne de nom sur .col-6 pour occuper la moitié de la largeur et les colonnes de score sur .col pour occuper une quantité égale d'espace restant. J'ai également donné aux colonnes de score les classes .text-right et .text-monospace pour garantir que les colonnes de chiffres s'alignent également sur les lignes.

    3:10 PM EDT

      @Wabash Valley Family Sports Center (Larry Wilson Court)

        Équipe Christner*

      1
      14
      25
      9

        Équipe Mikuly*

      2
      25
      12
      15

    3rd-5th Grade, Pool A
    Final