Hoe breekpunten en mediaquery's toepassen met 'align-items' in Tailwind?

Tailwind CSS biedt verschillende “ uitlijnen-items ” hulpprogramma's om de positie van flex- en rasteritems langs de dwarsas van de container te regelen. Deze hulpprogrammaklassen omvatten 'items-start', 'items-center', 'items-end', 'items-baseline' en 'items-stretch'. Bovendien kunnen gebruikers ook de breekpunten en mediaquery's op het hulpprogramma 'items-' gebruiken om de positie van het flex- of rasteritem langs de dwarsas van de container op verschillende schermformaten te wijzigen.

Dit artikel demonstreert de methode voor het toepassen van breekpunten en mediaquery's op de 'align-items'-hulpprogramma's in Tailwind.

Hoe breekpunten en mediaquery's toepassen met 'align-items' in Tailwind?

Maak een HTML-structuur om de gewenste breekpunten en mediaquery's toe te passen op 'justify-content'-hulpprogramma's in Tailwind. Definieer daarna de specifieke waarde voor de ' items- ' hulpprogramma voor verschillende schermformaten met behulp van de ' md ' of ' lg 'breekpunten. Wijzig ten slotte de schermgrootte van de webpagina ter verificatie.

Voorbeeld

In dit voorbeeld maken we een flexcontainer met de eigenschap 'items-start'. We zullen de ' md ” breekpunt met de “ items-centrum ' hulpprogramma en ' lg ” breekpunt met de “ items-einde ' hulpprogramma in de '

”-element om de verticale uitlijning van de items op een middelgroot en groot scherm te wijzigen:

< lichaam >

< div klas = 'flex items-start md:items-center lg:items-end rechtvaardigen-rond tekst-center h-44 m-3 bg-pink-300 gap-4' >
< div klas = 'bg-roze-600 py-4 w-40' > 1 div >
< div klas = 'bg-roze-600 py-12 w-40' > 2 div >
< div klas = 'bg-roze-600 py-8 w-40' > 3 div >
div >

lichaam >

Hier:

- “ items-begin ” klasse lijnt de flex-items verticaal uit op het begin van de container.
- “ md:items-centrum ” class lijnt de flexitems verticaal uit op het midden van de container op een middelgroot scherm.
- “ lg:items-end ” class lijnt de flexitems verticaal uit op het uiteinde van de container op het grote scherm.

Uitgang

De bovenstaande uitvoer laat zien dat de verticale uitlijning van de flex-items verandert naarmate de schermgrootte varieert. Dit geeft aan dat de opgegeven breekpunten en mediaquery's effectief zijn toegepast met het hulpprogramma 'uitlijnitems'.

Conclusie

Voor het toepassen van breekpunten en mediaquery's met hulpprogramma's voor 'items uitlijnen' in Tailwind, definieert u de gewenste waarde voor de ' items- ' hulpprogramma voor verschillende schermformaten door gebruik te maken van de ' md ' of ' lg 'breekpunten. Wijzig ter verificatie de schermgrootte van de webpagina en zorg voor wijzigingen. Dit artikel illustreert het voorbeeld om specifieke breekpunten en mediaquery's toe te passen op de 'align-items'-hulpprogramma's in Tailwind.

Hoe breekpunten en mediaquery's toepassen met 'align-items' in Tailwind?