Wie kann verhindert werden, dass sich Flexbox-Elemente ausdehnen, um den verfügbaren Platz auszufüllen?-CSS-Tutorial-php.cn

Wie kann verhindert werden, dass sich Flexbox-Elemente ausdehnen, um den verfügbaren Platz auszufüllen?

Susan Sarandon

Freigeben： 2024-11-29 15:28:10

Original

757 Leute haben es durchsucht

How to Prevent Flexbox Items from Stretching to Fill Available Space?

Streckung von Flexbox-Elementen: Lösung und Überlegungen

In einem Flexbox-Layout ist es möglich, dass Flex-Elemente gedehnt werden, um den verfügbaren Platz auszufüllen, selbst wenn ihr eigener Inhalt umfangreich ist kleiner. Dies kann in bestimmten Situationen ein Problem sein.

Ursache der Artikeldehnung

Im bereitgestellten Beispiel ist Das Element wird aufgrund des folgenden CSS auf die Höhe seines Flex-Containers

gedehnt:

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

Nach dem Login kopieren

Dadurch wird das

als Flex-Container und legt seine Höhe auf 200 Pixel fest. Da Element ist das einzige flexible Element. Es wird automatisch gedehnt, um den gesamten verfügbaren Platz auszufüllen.

Verhindern der Dehnung von Elementen

Es gibt zwei Hauptmethoden, um zu verhindern, dass sich flexible Elemente ausdehnen:

Legen Sie die Eigenschaft „align-items“ fest: Wenn Sie „align-items“ auf „flex-start“ setzen, werden alle flexiblen Elemente an der ausgerichtet Oben auf dem Behälter, unabhängig von der Inhaltsgröße. Dadurch wird sichergestellt, dass sich kein Element vertikal ausdehnt.

div {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

Nach dem Login kopieren

Verwenden Sie die Flex-Eigenschaft: Mit der Flex-Eigenschaft können Sie die Flexibilität einzelner Flex-Elemente steuern. Standardmäßig haben alle Flex-Elemente einen Flex-Wert von 1, was bedeutet, dass sie sich ausdehnen, um den verfügbaren Platz auszufüllen. Um zu verhindern, dass sich ein Element ausdehnt, legen Sie seinen Flexwert auf einen niedrigeren Wert fest, z. B. 0.

span {
  flex: 0;
}

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass sich Flexbox-Elemente ausdehnen, um den verfügbaren Platz auszufüllen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Vorheriger Artikel：Wie halte ich die Kanten scharf, wenn ich ein Bild mit dem CSS3-Filter unscharf mache? Nächster Artikel：Warum werden meine 50 % breiten Inline-Block-Spalten in die nächste Zeile umgebrochen?

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

2852

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

2986

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

2487

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...