Tailwind CSS tilbyr forskjellige ' align-elementer ” verktøy for å kontrollere posisjonen til flex- og rutenettelementer langs containerens tverrakse. Disse verktøyklassene inkluderer 'varer-start', 'varer-senter', 'varer-slutt', 'varer-grunnlinje' og 'varer-strekk'. Dessuten kan brukere også bruke bruddpunktene og mediespørringene på «elementer-
Denne artikkelen vil demonstrere metoden for å bruke bruddpunkter og mediespørringer på «align-items»-verktøyene i Tailwind.
Hvordan bruke brytepunkter og medieforespørsler med 'align-items' i Tailwind?
For å bruke ønskede bruddpunkter og mediespørringer på 'justify-content'-verktøy i Tailwind, lag en HTML-struktur. Deretter definerer du den spesifikke verdien til ' elementer-
Eksempel
I dette eksemplet vil vi lage en flex-beholder med egenskapen 'items-start'. Vi vil bruke ' md ' bruddpunkt med ' elementer-senter ' verktøy og ' lg ' bruddpunkt med ' varer-slutt ' verktøyet i ' Produksjon For å bruke bruddpunkter og mediespørringer med 'align-items'-verktøy i Tailwind, definer ønsket verdi til ' elementer-
< kropp >
< 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 >
kropp >
Her:
Utdataene ovenfor viser at den vertikale justeringen av flex-elementene endres ettersom skjermstørrelsen varierer. Dette indikerer at de spesifiserte bruddpunktene og mediespørringene effektivt har blitt brukt med 'align-items'-verktøyet. Konklusjon