In diesem Artikel wird die Methode veranschaulicht, mit der verhindert wird, dass Flex-Elemente in Tailwind CSS wachsen oder schrumpfen.
Wie kann verhindert werden, dass flexible Artikel bei Rückenwind wachsen oder schrumpfen?
Um zu verhindern, dass die Flex-Elemente in Tailwind wachsen und schrumpfen, erstellen Sie die HTML-Datei. Nutzen Sie dann die „ Flex-Grow-0 ' Und ' Flex-Schrumpf-0 ”-Dienstprogramme mit den spezifischen Flex-Elementen im HTML-Programm. Diese Dienstprogramme lassen nicht zu, dass Flex-Elemente entsprechend dem Platz im Flex-Container wachsen oder schrumpfen. Passen Sie anschließend die Bildschirmgröße der HTML-Webseite an, um Änderungen sicherzustellen.
Befolgen Sie die angegebenen Schritte für die praktische Umsetzung:
Schritt 1: Verhindern Sie, dass Flex-Elemente im HTML-Programm wachsen und schrumpfen
Erstellen Sie ein HTML-Programm und verwenden Sie das „ Flex-Grow-0 ' Und ' Flex-Schrumpf-0 ”Dienstprogramme mit den gewünschten flexiblen Elementen, um zu verhindern, dass sie wachsen oder schrumpfen:
< Körper >
< div Klasse = „flex h-20“ >
< div Klasse = „flex-grow-0 bg-gelb-500 w-40 m-1“ > 1 < / div >
< div Klasse = „flex-shrink-0 bg-fuchsia-500 w-40 m-1“ > 2 < / div >
< div Klasse = „flex-grow bg-teal-500 w-40 m-1“ > 3 < / div >
< div Klasse = „flex-shrink bg-red-500 w-40 m-1“ > 4 < / div >
< / div >
< / Körper >
Hier:
- „ Flex-Grow-0 Die Klasse „ verhindert, dass das Flex-Element wächst und zusätzlichen Platz im Flex-Container einnimmt, wenn Platz verfügbar ist.
- „ Flex-Schrumpf-0 Die Klasse „ verhindert, dass das Flex-Element im Flex-Container schrumpft und kleiner wird, wenn nicht genügend Platz vorhanden ist.
- „ Flex-Grow Die Klasse „ermöglicht es dem Flex-Element, zu wachsen und den verfügbaren Platz im Flex-Container zu belegen.
- „ Flex-Schrumpf Die Klasse „ermöglicht das Verkleinern des Flex-Elements, wenn im Flex-Container nicht genügend Platz vorhanden ist.
Schritt 2: Ausgabe überprüfen
Sehen Sie sich die HTML-Webseite an und ändern Sie die Bildschirmgröße, um sicherzustellen, dass die gewünschten Flex-Elemente nicht größer oder kleiner werden:
Die obige Ausgabe zeigt, dass das Flex-Element „2“ nicht auf unzureichendem Platz schrumpft und das Element „1“ nicht auf dem verfügbaren Platz wächst. Dies weist darauf hin, dass die gewünschten flexiblen Artikel am Wachsen und Schrumpfen gehindert wurden.
Abschluss
Um zu verhindern, dass die flexiblen Elemente bei Rückenwind wachsen und schrumpfen, verwenden Sie die Option „ Flex-Grow-0 ' Und ' Flex-Schrumpf-0 ”-Dienstprogramme mit den gewünschten Flex-Elementen im HTML-Programm. Ändern Sie zur Überprüfung die Bildschirmgröße der HTML-Webseite und zeigen Sie sie an. Dieser Artikel hat die Methode veranschaulicht, mit der verhindert werden kann, dass Flex-Elemente in Tailwind CSS wachsen oder schrumpfen.