Comment définir des largeurs d'élément uniformes pour l'élément le plus large à l'aide de CSS

Vous pouvez obtenir la mise en page souhaitée en utilisant la flexbox en ligne, comme démontré dans la solution CSS fournie :

.list-container {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
}

.list {
  display: flex;
  flex-direction: column;
}

.list-item {
  text-transform: capitalize;
  background-color: rgb(200, 30, 40);
  font-size: 1.3em;
  text-align: left;
  padding: 10px;
  margin: 1px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

Dans ce CSS, nous définissons le .list-container pour qu'il ait un affichage flexbox en ligne, garantissant que ses éléments .list enfants sont affichés horizontalement. Les éléments .list ont un affichage flexbox vertical, permettant à leurs éléments enfants .list-item de s'empiler verticalement.

Essentiellement, les éléments .list-item ont leur propriété flex-wrap définie pour s'enrouler. Cela signifie que lorsqu'ils ne peuvent pas tenir sur une seule ligne dans leur conteneur .list, ils passeront automatiquement à la ligne suivante.

De plus, nous définissons la propriété justifier-content sur flex-start pour le .list- éléments item, ce qui les amène à s’aligner sur le bord gauche de leur conteneur .list. Cela garantit que l'élément le plus long dicte la largeur de tous les éléments de la liste.

En implémentant ce CSS, vous pouvez créer une mise en page dans laquelle tous les éléments ont la même largeur que l'élément le plus large, garantissant ainsi une cohérence et une esthétique agréable. apparence.