Tailwind CSS bietet verschiedene „ align-items „Dienstprogramme zur Steuerung der Position von Flex- und Grid-Elementen entlang der Querachse des Containers. Zu diesen Dienstprogrammklassen gehören „items-start“, „items-center“, „items-end“, „items-baseline“ und „items-stretch“. Darüber hinaus können Benutzer auch die Haltepunkte und Medienabfragen im Dienstprogramm „items-
In diesem Artikel wird die Methode zum Anwenden von Haltepunkten und Medienabfragen auf die „align-items“-Dienstprogramme in Tailwind demonstriert.
Wie wende ich Haltepunkte und Medienabfragen mit „align-items“ in Tailwind an?
Erstellen Sie eine HTML-Struktur, um gewünschte Haltepunkte und Medienabfragen auf „justify-content“-Dienstprogramme in Tailwind anzuwenden. Definieren Sie anschließend den spezifischen Wert für „ items-
Beispiel
In diesem Beispiel erstellen wir einen Flex-Container mit der Eigenschaft „items-start“. Wir verwenden das „ md ” Haltepunkt mit dem „ Artikel-Center „Dienstprogramm“ und „ lg ” Haltepunkt mit dem „ Artikel-Ende ” Dienstprogramm in der „ Ausgang Um Haltepunkte und Medienabfragen mit „align-items“-Dienstprogrammen in Tailwind anzuwenden, definieren Sie den gewünschten Wert für „ items-
< Körper >
< div Klasse = „flex items-start md:items-center lg:items-end justify-around text-center h-44 m-3 bg-pink-300 gap-4“ >
< div Klasse = „bg-pink-600 py-4 w-40“ > 1 div >
< div Klasse = „bg-pink-600 py-12 w-40“ > 2 div >
< div Klasse = „bg-pink-600 py-8 w-40“ > 3 div >
div >
Körper >
Hier:
Die obige Ausgabe zeigt, dass sich die vertikale Ausrichtung der Flex-Elemente ändert, wenn die Bildschirmgröße variiert. Dies zeigt an, dass die angegebenen Haltepunkte und Medienabfragen effektiv mit dem Dienstprogramm „align-items“ angewendet wurden. Abschluss