Tailwind CSS ponuja različne ' align-items ” pripomočke za nadzor položaja upogibnih in mrežnih elementov vzdolž prečne osi vsebnika. Ti uporabni razredi vključujejo 'items-start', 'items-center', 'items-end', 'items-baseline' in 'items-stretch'. Poleg tega lahko uporabniki uporabijo tudi prelomne točke in medijske poizvedbe v pripomočku »items-
Ta članek bo prikazal metodo uporabe prekinitvenih točk in medijskih poizvedb na pripomočkih za »poravnavo elementov« v Tailwindu.
Kako uporabiti prelomne točke in medijske poizvedbe z »poravnavami« v Tailwindu?
Če želite uporabiti želene prekinitvene točke in medijske poizvedbe na pripomočkih za »utemeljitev vsebine« v Tailwindu, ustvarite strukturo HTML. Po tem določite posebno vrednost za ' predmeti-
Primer
V tem primeru bomo ustvarili vsebnik flex z lastnostjo »items-start«. Uporabili bomo ' md ' prelomna točka z ' predmeti-center »pripomoček in« lg ' prelomna točka z ' artikli-konec ' pripomoček v ' Izhod Za uporabo prekinitvenih točk in medijskih poizvedb s pripomočki »align-items« v Tailwindu definirajte želeno vrednost za » predmeti-
< telo >
< div razred = 'flex items-start md:items-center lg:items-end justify-around text-center h-44 m-3 bg-pink-300 gap-4' >
< div razred = 'bg-roza-600 py-4 w-40' > 1 div >
< div razred = 'bg-roza-600 py-12 w-40' > 2 div >
< div razred = 'bg-roza-600 py-8 w-40' > 3 div >
div >
telo >
Tukaj:
Zgornji rezultat kaže, da se navpična poravnava elementov flex spreminja, ko se spreminja velikost zaslona. To pomeni, da so bile navedene prekinitvene točke in medijske poizvedbe učinkovito uporabljene s pripomočkom »align-items«. Zaključek