Hoe breekpunten en mediaquery's toepassen met 'justify-content' in Tailwind?

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

< lichaam >

< div klas = 'flex rechtvaardigen-start md:rechtvaardigen-tussen lg:rechtvaardigen-eind gap-3 m-3 bg-teal-700' >
< div klas = 'bg-geel-400 w-24 h-12' > 1 < / div >
< div klas = 'bg-geel-400 w-24 h-12' > 2 < / div >
< div klas = 'bg-geel-400 w-24 h-12' > 3 < / div >

< / div >

< / lichaam >

Hier:

• 'rechtvaardigen-start' klasse lijnt de flex-items uit aan het begin van de hoofdas van de container.
• 'md: rechtvaardigen tussen' class verdeelt de flex-items langs de hoofdas van de container met gelijke afstand ertussen op een middelgroot scherm.
• 'lg: rechtvaardigen-einde' class lijnt de flex-items aan het einde van de hoofdas van de container uit op een groot scherm.

Uitgang

---

---

De bovenstaande uitvoer laat zien dat de horizontale 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 'justify-content'.

Conclusie

Voor het toepassen van breekpunten en mediaquery's met 'justify-content'-hulpprogramma's in Tailwind, definieert u de gewenste waarde voor de 'rechtvaardigen-' 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 heeft het voorbeeld gedemonstreerd om gewenste breekpunten en mediaquery's toe te passen op de 'justify-content'-hulpprogramma's in Tailwind.