Tailwind CSS nudi različite ' align-items ” pomoćne programe za kontrolu položaja savitljivih i rešetkastih stavki duž poprečne osi spremnika. Ove uslužne klase uključuju “items-start”, “items-center”, “items-end”, “items-baseline” i “items-stretch”. Štoviše, korisnici također mogu koristiti prijelomne točke i medijske upite na uslužnom programu 'items-
Ovaj će članak pokazati metodu primjene prijelomnih točaka i medijskih upita na uslužnim programima za 'poravnavanje stavki' u Tailwindu.
Kako primijeniti prijelomne točke i medijske upite s 'align-items' u Tailwindu?
Za primjenu željenih prijelomnih točaka i medijskih upita na uslužnim programima 'justify-content' u Tailwindu, izradite HTML strukturu. Nakon toga, definirajte određenu vrijednost za ' stavke-
Primjer
U ovom primjeru stvorit ćemo fleksibilni spremnik sa svojstvom 'items-start'. Koristit ćemo ' doktor medicine ' prijelomna točka s ' predmeti-centar 'uslužni program i' lg ' prijelomna točka s ' predmeti-kraj ' uslužni program u ' Izlaz Za primjenu prijelomnih točaka i medijskih upita s uslužnim programima 'align-items' u Tailwindu, definirajte željenu vrijednost za ' stavke-
< tijelo >
< div razreda = 'flex items-start md:items-center lg:items-end justify-around text-center h-44 m-3 bg-pink-300 gap-4' >
< div razreda = 'bg-pink-600 py-4 w-40' > 1 div >
< div razreda = 'bg-ružičasta-600 py-12 w-40' > 2 div >
< div razreda = 'bg-ružičasta-600 py-8 w-40' > 3 div >
div >
tijelo >
Ovdje:
Gornji rezultat pokazuje da se okomito poravnanje flex stavki mijenja kako veličina zaslona varira. Ovo označava da su navedene prijelomne točke i medijski upiti učinkovito primijenjeni s uslužnim programom 'align-items'. Zaključak