Cómo establecer anchos uniformes de elementos para el elemento más ancho usando CSS

Puede lograr el diseño deseado utilizando flexbox en línea, como se demuestra en la solución CSS proporcionada:

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

En este CSS, configuramos el contenedor .list para que tenga una visualización de flexbox en línea, asegurando que sus elementos .list secundarios se muestren horizontalmente. Los elementos .list tienen una visualización de caja flexible vertical, lo que permite que sus elementos secundarios .list-item se apilen verticalmente.

Crucialmente, los elementos .list-item tienen su propiedad flex-wrap configurada para ajustarse. Esto significa que cuando no pueden caber en una sola línea dentro de su contenedor .list, pasarán automáticamente a la siguiente línea.

Además, configuramos la propiedad justify-content en flex-start para .list- elementos de elemento, lo que hace que se alineen con el borde izquierdo de su contenedor .list. Esto garantiza que el elemento más largo dicte el ancho de todos los elementos de la lista.

Al implementar este CSS, puede crear un diseño en el que todos los elementos tengan el mismo ancho que el elemento más ancho, lo que garantiza una apariencia consistente y estéticamente agradable. apariencia.