Como definir larguras uniformes de itens para o elemento mais largo usando CSS

Você pode obter o layout desejado utilizando flexbox inline, conforme demonstrado em a solução CSS fornecida:

.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;
}

Neste CSS, definimos o .list-container para ter uma exibição flexbox inline, garantindo que seus elementos .list filhos sejam exibidos horizontalmente. Os elementos .list têm uma exibição flexbox vertical, permitindo que seus elementos .list-item filhos sejam empilhados verticalmente.

Crucialmente, os elementos .list-item têm sua propriedade flex-wrap definida como wrap. Isso significa que quando eles não puderem caber em uma única linha em seu contêiner .list, eles passarão automaticamente para a próxima linha.

Além disso, definimos a propriedade justify-content como flex-start para o .list- elementos de item, o que faz com que eles se alinhem à borda esquerda de seu contêiner .list. Isso garante que o item mais longo dite a largura de todos os itens da lista.

Ao implementar este CSS, você pode criar um layout onde todos os itens tenham a mesma largura do elemento mais largo, garantindo uma aparência consistente e esteticamente agradável. aparência.