So legen Sie mit CSS einheitliche Elementbreiten für das breiteste Element fest

Sie können das gewünschte Layout erreichen, indem Sie Inline-Flexbox verwenden, wie in gezeigt Die bereitgestellte CSS-Lösung lautet:

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

In diesem CSS stellen wir den .list-Container so ein, dass er eine Inline-Flexbox-Anzeige hat, um sicherzustellen, dass seine untergeordneten .list-Elemente horizontal angezeigt werden. Die .list-Elemente verfügen über eine vertikale Flexbox-Anzeige, sodass ihre untergeordneten .list-item-Elemente vertikal gestapelt werden können.

Entscheidend ist, dass die Flex-Wrap-Eigenschaft der .list-item-Elemente auf „Wrap“ eingestellt ist. Das heißt, wenn sie nicht in eine einzelne Zeile in ihrem .list-Container passen, werden sie automatisch in die nächste Zeile umgebrochen.

Außerdem setzen wir die Eigenschaft „justify-content“ auf „flex-start“ für den .list-Container. item-Elemente, wodurch sie am linken Rand ihres .list-Containers ausgerichtet werden. Dadurch wird sichergestellt, dass das längste Element die Breite aller Elemente in der Liste bestimmt.

Durch die Implementierung dieses CSS können Sie ein Layout erstellen, in dem alle Elemente die gleiche Breite wie das breiteste Element haben, wodurch ein einheitliches und ästhetisch ansprechendes Ergebnis gewährleistet wird Aussehen.