Как установить одинаковую ширину для самого широкого элемента с помощью CSS

Вы можете добиться желаемого макета, используя встроенный флексбокс, как показано в предоставленное CSS-решение:

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

В этом CSS мы установили для .list-container встроенное отображение флексбокса, гарантируя, что его дочерние элементы .list отображаются горизонтально. Элементы .list имеют вертикальное отображение flexbox, что позволяет их дочерним элементам .list-item располагаться вертикально.

Важно отметить, что свойство flex-wrap элементов .list-item установлено на перенос. Это означает, что когда они не могут поместиться в одну строку в контейнере .list, они автоматически переходят на следующую строку.

Кроме того, мы устанавливаем для свойства justify-content значение flex-start для .list- элементы item, что приводит к их выравниванию по левому краю контейнера .list. Это гарантирует, что самый длинный элемент будет определять ширину всех элементов в списке.

Реализуя этот CSS, вы можете создать макет, в котором все элементы будут иметь ту же ширину, что и самый широкий элемент, обеспечивая единообразие и эстетичный вид. появление.