Wie wende ich Haltepunkte und Medienabfragen mit „justify-content“ in Tailwind an?

“ Element, um die horizontale Ausrichtung seiner Elemente auf mittleren und großen Bildschirmgrößen zu ändern:

< Körper >

< div Klasse = „flex justify-start md:justify-between lg:justify-end gap-3 m-3 bg-teal-700“ >
< div Klasse = „bg-gelb-400 w-24 h-12“ > 1 < / div >
< div Klasse = „bg-gelb-400 w-24 h-12“ > 2 < / div >
< div Klasse = „bg-gelb-400 w-24 h-12“ > 3 < / div >

< / div >

< / Körper >

Hier:

• „Rechtfertigungsanfang“ Die Klasse richtet die Flex-Elemente am Anfang der Hauptachse des Containers aus.
• „md:justify-between“ Die Klasse verteilt die Flex-Elemente entlang der Hauptachse des Containers mit gleichem Abstand zwischen ihnen auf mittlerer Bildschirmgröße.
• „lg:justify-end“ Die Klasse richtet die Flex-Elemente am Ende der Hauptachse des Containers auf einem großen Bildschirm aus.

Ausgang

---

---

Die obige Ausgabe zeigt, dass sich die horizontale Ausrichtung der Flex-Elemente ändert, wenn die Bildschirmgröße variiert. Dies zeigt an, dass die angegebenen Haltepunkte und Medienabfragen effektiv mit dem Dienstprogramm „justify-content“ angewendet wurden.

Abschluss

Um Haltepunkte und Medienabfragen mit „justify-content“-Dienstprogrammen in Tailwind anzuwenden, definieren Sie den gewünschten Wert für „justify-“ Dienstprogramm für verschiedene Bildschirmgrößen mithilfe der Funktion „ md ' oder ' lg ” Haltepunkte. Ändern Sie zur Überprüfung die Bildschirmgröße der Webseite und stellen Sie sicher, dass Änderungen vorgenommen werden. In diesem Artikel wurde das Beispiel für die Anwendung gewünschter Haltepunkte und Medienabfragen auf die Dienstprogramme „justify-content“ in Tailwind demonstriert.