Wie kann verhindert werden, dass sich Flex-Artikel in einem Flex-Container ungewollt ausdehnen?

So verhindern Sie, dass sich Flex-Elemente ungewollt ausdehnen

Beim Verschachteln von Elementen in einem Flex-Container kommt es häufig vor, dass sich untergeordnete Elemente ausdehnen, um die gesamte Containerhöhe auszufüllen. auch wenn sie nur minimalen Inhalt enthalten. Dies kann unerwünscht sein, insbesondere wenn Sie die Größe bestimmter flexibler Elemente steuern möchten.

Verstehen des Problems

Standardmäßig werden flexible Elemente so gedehnt, dass sie die volle Höhe ihres Containers einnehmen. Dies liegt daran, dass die Eigenschaft „align-items“ auf „stretch“ eingestellt ist. Dies bedeutet, dass der Container den verfügbaren Platz gleichmäßig auf seine untergeordneten Elemente verteilt, wodurch diese sich vertikal ausdehnen.

Verhindern der Dehnung von Flex-Elementen

Um zu verhindern, dass sich bestimmte Flex-Elemente ausdehnen, können Sie Anpassungen vornehmen die align-items-Eigenschaft. Hier sind zwei Ansätze, um dies zu erreichen:

1. Wenden Sie align-items: flex-start auf den Flex-Container an

Durch die Einstellung von align-items: flex-start auf den Flex-Container weisen Sie den Browser an, die Elemente oben im Container auszurichten. Dies bedeutet, dass sie sich nicht mehr ausdehnen, um die gesamte Höhe auszufüllen.

div {
  align-items: flex-start;
  background: tan;
  display: flex;
  height: 200px;
}
span {
  background: red;
}

2. Verwenden Sie „flex-shrink: 0“ für das spezifische Flex-Element.

Wenn Sie verhindern möchten, dass sich bestimmte flexible Elemente ausdehnen, während andere den verbleibenden Platz ausfüllen können, können Sie die Eigenschaft „flex-shrink“ verwenden. Indem Sie „flex-shrink: 0“ für die gewünschten Elemente festlegen, verhindern Sie, dass diese über ihre ursprüngliche Größe hinaus schrumpfen (und sich ausdehnen).

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

span {
  background: red;
  flex-shrink: 0;
}

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass sich Flex-Artikel in einem Flex-Container ungewollt ausdehnen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!