Cum să aplici punctele de întrerupere și interogările media cu „articole de aliniere” în Tailwind?

Tailwind CSS oferă diverse „ alinierea elementelor ” utilități pentru a controla poziția articolelor flexibile și grid de-a lungul axei transversale a containerului. Aceste clase de utilitate includ „items-start”, „items-center”, „items-end”, „items-baseline” și „items-stretch”. În plus, utilizatorii pot utiliza, de asemenea, punctele de întrerupere și interogările media din utilitarul „items-” pentru a schimba poziția elementului flexibil sau grilă de-a lungul axei transversale a containerului pe diferite dimensiuni de ecran.

Acest articol va demonstra metoda de aplicare a punctelor de întrerupere și a interogărilor media pe utilitarele „aliniere articole” din Tailwind.

Cum să aplici punctele de întrerupere și interogările media cu „articole de aliniere” în Tailwind?

Pentru a aplica punctele de întrerupere și interogările media dorite pe utilitățile „justify-content” în Tailwind, creați o structură HTML. După aceea, definiți valoarea specifică pentru „ articole- ” utilitar pentru diferite dimensiuni de ecran utilizând „ md ” sau ” lg ” puncte de întrerupere. În cele din urmă, modificați dimensiunea ecranului paginii web pentru verificare.

Exemplu

În acest exemplu, vom crea un container flexibil cu proprietatea „items-start”. Vom folosi „ md ” punct de întrerupere cu ” obiecte-centrul „utilitate și „ lg ” punct de întrerupere cu ” item-end „utilitate în „