In diesem Artikel wird die Methode erläutert, mit der verhindert wird, dass Flex-Elemente in Tailwind CSS umbrochen werden.
Wie kann verhindert bzw. verhindert werden, dass sich flexible Artikel im Rückenwind verwickeln?
Um zu verhindern, dass Flex-Elemente in Tailwind umgebrochen werden, erstellen Sie eine HTML-Datei. Verwenden Sie dann das Dienstprogramm „flex-nowrap“ mit dem Flex-Container im HTML-Programm, um zu verhindern, dass Flex-Elemente umbrochen werden. Stellen Sie als Nächstes sicher, dass die Änderungen vorgenommen wurden, indem Sie die HTML-Webseite anzeigen.
Probieren Sie die unten aufgeführten Schritte aus, um es besser zu verstehen:
Schritt 1: Verhindern Sie, dass Flex-Elemente im HTML-Programm umbrochen werden
Erstellen Sie ein HTML-Programm und verwenden Sie das „ Flex-Nowrap ”-Dienstprogramm mit dem gewünschten Flex-Container, um zu verhindern, dass sich Flex-Artikel einwickeln:
< Körper >
< div Klasse = „flex flex-nowrap h-40“ >
< div Klasse = „basis-1/4 bg-rot-500 m-1“ > 1 < / div >
< div Klasse = „basis-1/3 bg-gelb-500 m-1“ > 2 < / div >
< div Klasse = „basis-1/2 bg-teal-500 m-1“ > 3 < / div >
< / div >
< / Körper >
Hier:
- „ biegen Die Klasse ermöglicht das Flexbox-Layout auf der Element und ermöglicht die Anordnung und Ausrichtung der untergeordneten Elemente.
- „ Flex-Nowrap Die Klasse „gibt an, dass die Flex-Elemente nicht auf mehrere Zeilen umgebrochen werden sollen und alle Flex-Elemente in einer einzigen Zeile bleiben sollen.
- Der ' Basis-1/4 “, „ Basis-1/3 ', Und ' Basis-1/2 „Klassen legen das Innere fest
s Breite auf 25 %, 33,33 % bzw. 50 % ihrer übergeordneten Elemente.
Schritt 2: Ausgabe überprüfen
Um sicherzustellen, dass die Flex-Elemente nicht umschlossen wurden, sehen Sie sich die HTML-Webseite an:
Auf der obigen Webseite stehen die Flex-Elemente in einer einzigen Zeile und wurden nicht umbrochen.
Abschluss
Um zu verhindern, dass Flex-Elemente in Tailwind umgebrochen werden, verwenden Sie das Dienstprogramm „flex-nowrap“ mit dem gewünschten Flex-Container im HTML-Programm. Dieses Dienstprogramm verhindert, dass die Flex-Elemente umwickelt werden. Sehen Sie sich zur Überprüfung die Änderungen auf der Webseite an. In diesem Artikel wurde die Methode veranschaulicht, um zu verhindern, dass Flex-Elemente in Tailwind CSS umbrochen werden.