Ta zapis bo ponazoril metodo za preprečevanje rasti ali krčenja elementov flex v Tailwind CSS.
Kako preprečiti, da bi Flex predmeti zrasli ali se skrčili v vetru?
Če želite preprečiti, da bi se elementi flex povečevali in krčili v Tailwindu, naredite datoteko HTML. Nato uporabite » flex-grow-0 « in » flex-shrink-0 ” s posebnimi elementi flex v programu HTML. Ti pripomočki ne dovolijo, da bi se predmeti flex povečali ali zmanjšali glede na prostor znotraj vsebnika flex. Nato prilagodite velikost zaslona spletne strani HTML, da zagotovite spremembe.
Sledite navedenim korakom za njegovo praktično izvedbo:
1. korak: Preprečite, da bi se elementi Flex povečevali in krčili v programu HTML
Naredite program HTML in uporabite » flex-grow-0 « in » flex-shrink-0 ” z želenimi upogljivimi elementi, da preprečite njihovo rast ali krčenje:
< telo >
< div razred = 'flex h-20' >
< div razred = 'flex-grow-0 bg-rumena-500 w-40 m-1' > 1 < / div >
< div razred = 'flex-shrink-0 bg-fuksija-500 w-40 m-1' > 2 < / div >
< div razred = 'flex-grow bg-teal-500 w-40 m-1' > 3 < / div >
< div razred = 'flex-shrink bg-rdeča-500 w-40 m-1' > 4 < / div >
< / div >
< / telo >
Tukaj:
- “ flex-grow-0 ” razred preprečuje, da bi se element flex povečal in zavzel dodaten prostor znotraj vsebnika flex, ko je na voljo prostor.
- “ flex-shrink-0 ” razred preprečuje, da bi se element flex skrčil in zmanjšal znotraj vsebnika flex, ko je prostora premalo.
- “ flex-grow ” omogoča, da element flex raste in zasede razpoložljivi prostor v vsebniku flex.
- “ flex-shrink ” omogoča, da se element flex skrči, če v vsebniku flex ni dovolj prostora.
2. korak: Preverite izhod
Oglejte si spletno stran HTML in spremenite velikost zaslona, da preprečite rast in krčenje želenih elementov flex:
Zgornji izhod kaže, da se fleksibilni element »2« ne krči v nezadostnem prostoru in element »1« ne raste v razpoložljivem prostoru. To pomeni, da želenim upogibnim predmetom ni bilo mogoče rasti in krčiti.
Zaključek
Če želite preprečiti, da bi se upogljivi elementi v Tailwindu povečali in skrčili, uporabite » flex-grow-0 « in » flex-shrink-0 ” z želenimi elementi flex v programu HTML. Za preverjanje spremenite in si oglejte velikost zaslona spletne strani HTML. Ta zapis je ponazoril metodo za preprečevanje rasti ali krčenja elementov flex v Tailwind CSS.