Tailwind CSS piedāvā dažādus izlīdzināt vienumus ” utilītas, lai kontrolētu elastīgo un režģa elementu pozīciju gar konteinera šķērsasi. Šīs lietderības klases ietver “vienumu sākums”, “vienumu centrs”, “vienumu beigas”, “preces-baseline” un “preces-stretch”. Turklāt lietotāji var arī izmantot pārtraukuma punktus un multivides vaicājumus utilītprogrammā “items-
Šajā rakstā tiks parādīta metode, kā lietot pārtraukuma punktus un multivides vaicājumus Tailwind utilītprogrammām “līdzināt vienumus”.
Kā lietot pārtraukuma punktus un multivides vaicājumus ar “vienumu izlīdzināšanu” programmā Tailwind?
Lai lietotu vēlamos pārtraukuma punktus un multivides vaicājumus “justify-content” utilītprogrammām programmā Tailwind, izveidojiet HTML struktūru. Pēc tam definējiet konkrēto vērtību “ vienumi-
Piemērs
Šajā piemērā mēs izveidosim elastīgu konteineru ar rekvizītu “items-start”. Mēs izmantosim ' md ' pārtraukuma punkts ar ' priekšmetu centrs ' lietderība un ' lg ' pārtraukuma punkts ar ' preces-beigas ' lietderība sadaļā ' Izvade Lai lietotu pārtraukuma punktus un multivides vaicājumus ar “align-items” utilītprogrammām programmā Tailwind, definējiet vēlamo vērtību “ vienumi-
< ķermeni >
< div klasē = 'flex items-start md:items-center lg:items-end justify-around text-center h-44 m-3 bg-pink-300 Gap-4' >
< div klasē = 'bg-pink-600 py-4 w-40' > 1 div >
< div klasē = 'bg-pink-600 py-12 w-40' > 2 div >
< div klasē = 'bg-pink-600 py-8 w-40' > 3 div >
div >
ķermeni >
Šeit:
Iepriekš redzamā izvade parāda, ka elastīgo vienumu vertikālais līdzinājums mainās, mainoties ekrāna izmēram. Tas norāda, ka norādītie pārtraukuma punkti un multivides vaicājumi ir efektīvi lietoti ar utilītu “līdzināt vienumus”. Secinājums