Flexboks: Kontroller formindskelsen i flexretning med flex-shrink

I denne opplæringen vil vi fokusere på den CSS-egenskapsmodifieren flex-shrink. Dette alternativet er en del av Flexbox-modellen, som lar deg lage fleksible oppsett som tilpasser seg ulike skjermstørrelser. Mens vi i forrige video behandlet flex-grow, som styrer hvordan elementer i Flex-beholderen kan vokse, handler det denne gangen om krympingen av elementer når plassen i beholderen er mindre enn den angitte flex-basisen. I denne artikkelen vil du lære hvordan du kan begrense eller justere krympingen av Flexbox-elementer ved å bruke flex-shrink.

Viktigste innsikter

• flex-shrink bestemmer hvor mye et element kan krympe når det ikke er nok plass tilgjengelig.
• Standardverdien for flex-shrink er 1, noe som betyr at et element kan ta opp plass basert på tilgjengelig plass og andre definerte elementer i beholderen.
• Du kan bruke flex-shrink for å etablere et bestemt forhold for krymping mellom flere elementer.

Trinn-for-trinn veiledning

Nedenfor vil jeg forklare deg steg for steg hvordan du kan optimalt utnytte flex-shrink. Jeg vil gi hvert steg med skjermbildevariabler som du senere kan erstatte med de relevante skjermbildene fra videoen.

Først ser du en grunnleggende Flexbox-applikasjon i CSS. Du har tre elementer med en flex-basis på 100 piksler. Hvis det er nok plass i Flex-beholderen, vil alt være som planlagt.

Nå reduserer vi høyden på beholderen til 200 piksler. I dette tilfellet er plassen som trengs større enn høyden på beholderen. Elementene har fortsatt en flex-basis på 100 piksler og kan derfor ikke krympe, fordi vi har satt flex-shrink til 0.

For å aktivere krympemekanismen, endrer du verdien av flex-shrink. Sett den til 1 for elementet nav. På denne måten informerer du CSS om at nav-elementet skal maksimalt krympe.

Lagre endringene dine nå, og du vil se at nav-elementet proporsjonalt blir krympet, helt til det når den minimale høyden som er angitt av innholdet.

Hvis du vil at alle elementene skal krympe jevnt, sett flex-shrink til 1 for alle elementer. Når beholderen blir mindre enn den nødvendige plassen, vil alle elementene krympe tilsvarende.

For å vise hvordan de ulike flex-shrink verdiene påvirker layouten, velg et forhold som 1:1:2. I dette tilfellet vil hovedområdet (main) få den største krympedelen, mens de andre elementene vil få de mindre delene hver.

Dette betyr at hovedelementet vil ta opp mer plass eller mindre plass enn de to andre elementene når plassen er begrenset. Hvis du imidlertid ønsker en jevn layoutjustering, kan du også sette flex-shrink til samme verdi for alle elementene.

Til slutt kan du kombinere verdiene for flex-grow, flex-shrink og flex-basis for å oppnå mer fleksibilitet i CSS-layoutet ditt. Sørg for å tilpasse dem etter designets behov.

Oppsummering

I denne opplæringen har du lært hvordan du kan bruke flex-shrink i CSS for å kontrollere størrelsesendringen av Flexbox-elementer. Du har fått kjennskap til ulike måter å definere krympingen på og hvordan denne påvirker layouten.