Tässä ohjeessa käsittelemme CSS-ominaisuuden muokkainta nimeltään flex-shrink. Tämä vaihtoehto on osa Flexbox-mallia, joka mahdollistaa joustavien layouttien luomisen erilaisille näyttöko'oille. Käsitellessämme viimeisessä videossa flex-growia, joka määrittää miten elementit kasvavat Flex-Containerissa, tällä kertaa keskitymme elementtien kutistumiseen containerin tilan ollessa pienempi kuin määritetty flex-basis. Tässä kirjoituksessa opit, miten voit käyttää flex-shrinkiä rajoittaa tai säätää joustavien elementtien kutistumista.
Tärkeimmät havainnot
- flex-shrink määrittää kuinka paljon elementti voi kutistua, jos tila ei riitä.
- flex-shrinkin oletusarvo on 1, mikä tarkoittaa, että elementti voi ottaa tilaa käyttöön sen mukaan, kuinka paljon tilaa on saatavilla ja muut elementit containerissa on määritelty.
- Voit käyttää flex-shrinkiä määrittämään tietyn suhteen kutistumiselle useiden elementtien välillä.
Vaiheittainen ohje
Alla selitän sinulle vaiheet optimaaliseen flex-shrinkin käyttämiseen. Jokaisen vaiheen yhteydessä annan kuvankaappausmuuttujat, jotka voit myöhemmin korvata vastaavilla kuvankaappauksilla videosta.
Ensimmäisenä näet perus Flexbox-sovelluksen CSS:ssä. Sinulla on kolme elementtiä, joilla on 100 pikselin flex-basis. Jos tilaa on tarpeeksi Flex-Containerissa, kaikki pysyy suunnitellusti.
Nyt pienennämme containerin korkeutta 200 pikseliin. Tässä tapauksessa tarvittava tila on suurempi kuin containerin korkeus. Elementit ovat edelleen 100 pikselin flex-basella eivätkä siksi voi kutistua, koska olemme asettaneet flex-shrinkin arvoksi 0.
Aktivoidaksesi kutistumismekanismin, muuta flex-shrinkin arvoa. Aseta se nav-elementille 1. Tällöin kerrot CSS:lle, että nav-elementti voi kutistua maksimissaan.
Tallenna muutoksesi ja huomaat, että nav-elementti kutistuu suhteessa ja saavuttaa minimikorkeuden, jonka sisältö määrittää.
Jos haluat, että kaikki elementit kutistuvat tasaisesti, aseta flex-shrink kaikille elementeille 1. Jos containeri on nyt pienempi kuin tarvittava tila, kaikki elementit kutistuvat vastaavasti.
Näyttääksesi yhteenvetona kuinka eri flex-shrink-arvot vaikuttavat layoutiin, valitse suhde kuten 1:1:2. Tässä tapauksessa pääalue (main) saa suurimman kutistumisosuuden, kun taas muut elementit saavat pienemmät osuudet kukin.
Tämä tarkoittaa, että main-elementti vie tilaa tai tarvitsee vähemmän tilaa kuin kaksi muuta elementtiä tilan puutteessa. Jos kuitenkin haluat tiheämmän layout-muutoksen, voit asettaa flex-shrinkin kaikille elementeille samaan arvoon.
Lopuksi voit yhdistää flex-growin, flex-shrinkin ja flex-basisin arvot, mikä antaa sinulle enemmän joustavuutta CSS-layouttien suunnittelussa. Muista mukauttaa ne aina suunnittelupalvelusi vaatimuksiin.
Yhteenveto
Tässä ohjeessa opit, miten voit käyttää flex-shrinkiä CSS:ssä hallitaksesi joustavien Flexbox-elementtien koon muutosta. Olet oppinut erilaisia tapoja määrittää kutistuminen ja sen vaikutukset layoutiin.
Usein kysytyt kysymykset
Miten flex-shrink toimii?flex-shrink määrittää kuinka paljon elementti voi kutistua, kun käytettävissä oleva tila on pienempi kuin flex-basis.
Mikä on flex-shrinkin oletusarvo?flex-shrinkin oletusarvo on 1, mikä tarkoittaa että kaikki elementit kutistuvat tasaisesti.
Miten asetan flex-shrinkin useille elementeille?asettamalla saman flex-shrink-arvon kaikille elementeille, kutistuminen jakautuu tasaisesti.
Voinko käyttää flex-shrinkiä yhdessä flex-growin kanssa?Kyllä, flex-shrinkiä, flex-growia ja flex-basisia voidaan käyttää yhdessä saavuttaaksesi joustavan layoutin.
Mitä tapahtuu, jos flex-shrink on asetettu arvoon 0?Kun flex-shrink on asetettu arvoon 0, elementit eivät kutistu vaikka container olisikin pienempi kuin flex-basisien summa.
