Verhindern der Dehnung von Flex-Elementen

Bei Verwendung des Flexbox-Layouts ist es möglich, dass sich Flex-Elemente dehnen und den verfügbaren Platz in ihrem Container füllen . Es gibt jedoch Situationen, in denen Sie dies möglicherweise verhindern möchten.

Warum können sich flexible Elemente dehnen?

Standardmäßig werden flexible Elemente entlang der Primärachse gedehnt ihres Containers, der normalerweise entweder horizontal (Zeile) oder vertikal (Spalte) ist. Dies liegt daran, dass die Flex-Eigenschaft standardmäßig auf 1 gesetzt ist, was angibt, dass das Element flexibel sein und sich erweitern soll, um jeden verfügbaren Platz auszufüllen.

Verhindern der Dehnung von Flex-Elementen

Um zu verhindern, dass sich ein Flex-Element ausdehnt, können Sie den Standard-Flex-Wert überschreiben, indem Sie ihn auf 0 setzen. Dadurch wird das Element verkleinert, um es an seinen Inhalt anzupassen, und verhindert, dass es mehr Platz als nötig einnimmt.

Beispiel

Betrachten Sie das folgende Beispiel:

div {
  display: flex;
  height: 200px;
  background: tan;
}
span {
  background: red;
}

  This is some text.

In diesem Beispiel wird das Flex-Element (Span) gedehnt, um die gesamte Höhe seines Containers auszufüllen. Um dies zu verhindern, fügen Sie dem div-Element den folgenden Stil hinzu:

align-items: flex-start;

Dadurch werden die Flex-Elemente am Anfang ihres Containers ausgerichtet und verhindert, dass sie sich dorthin strecken Füllen Sie die gesamte Höhe aus.