I denne vejledning vil vi beskæftige os med CSS-ejendomsmarkøren flex-shrink. Denne mulighed er en del af Flexbox-modellen, der giver dig mulighed for at oprette fleksible layout, der tilpasser sig forskellige skærmstørrelser. Mens vi behandlede flex-grow i den sidste video, som styrer, hvordan elementer kan vokse i Flex-container, drejer det sig denne gang om elementers indsnævring, når pladsen i containeren er mindre end den angivne flex-basis. I dette indlæg lærer du, hvordan du med flex-shrink målrettet kan begrænse eller tilpasse formindskelsen af Flexbox-elementer.
Vigtigste indsigt
- flex-shrink bestemmer, hvor meget et element kan formindskes, når der ikke er tilstrækkelig plads.
- Standardværdien for flex-shrink er 1, hvilket betyder, at et element kan optage plads afhængigt af, hvor meget plads der er tilgængelig, og hvordan andre elementer i containeren er defineret.
- Man kan anvende flex-shrink for at fastsætte en bestemt forhold for formindskningen mellem flere elementer.
Trin-for-trin vejledning
Nedenfor vil jeg forklare dig trinnene til at udnytte flex-shrink optimalt. Jeg vil forsyne hvert trin med skærmbillede-variabler, som du senere kan erstatte med de relevante skærmbilleder fra videoen.
Først ser du en grundlæggende brug af Flexbox i CSS. Du har tre elementer, der har en flex-basis på 100 pixels. Hvis der er tilstrækkelig plads i Flex-containeren, forbliver alt som planlagt.
Nu reducerer vi højden på containeren til 200 pixels. I dette tilfælde er det plads, der er nødvendig, større end containerens højde. Elementerne har stadig en flex-basis på 100 pixels og kan derfor ikke formindskes, fordi vi har sat flex-shrink til 0.
For at aktivere formindskningsmekanismen ændrer du værdien af flex-shrink. Sæt den til 1 for elementet nav. Dermed informerer du CSS om, at elementet nav maksimalt skal formindskes.
Gem nu dine ændringer, og du vil se, at nav-elementet formindskes proportionelt, helt ned til den minimale højde, der er angivet af indholdet.
Hvis du vil have, at alle elementer formindskes ens, så sæt flex-shrink til 1 for alle elementer. Hvis containeren nu bliver mindre end den nødvendige plads, formindskes alle elementer i overensstemmelse hermed.
For at illustrere, hvordan de forskellige flex-shrink-værdier påvirker layoutet, vælg et forhold som f.eks. 1:1:2. I dette tilfælde får hovedområdet (main) den største del af formindskningen, mens de andre elementer hver får de mindre dele.
Dette betyder, at hovedelementet vil tage mere plads i tilfælde af pladsmangel eller vil have brug for mindre plads i forhold til de to andre elementer. Hvis du derimod ønsker en knugende layout-tilpasning, kan du også sætte flex-shrink til samme værdi for alle elementer.
Til sidst kan du kombinere værdierne for flex-grow, flex-shrink og flex-basis, hvilket giver dig mere fleksibilitet til layoutdesign i CSS. Sørg altid for at tilpasse dem til kravene i dit design.
Opsummering
I denne vejledning har du lært, hvordan du bruger flex-shrink i CSS til at styre størrelsesændringen af Flexbox-elementer. Du har lært forskellige metoder til at definere formindskningen og hvordan det påvirker layoutet.
Ofte stillede spørgsmål
Hvordan fungerer flex-shrink?flex-shrink bestemmer, hvor meget et element kan formindskes, når den tilgængelige plads er mindre end flex-basis.
Hvad er standardværdien for flex-shrink?Standardværdien af flex-shrink er 1, hvilket betyder, at alle elementer formindskes ens.
Hvordan sætter jeg flex-shrink for flere elementer?Ved at angive den samme flex-shrink-værdi for alle elementer fordeles formindskningen ensartet.
Kan flex-shrink også bruges i kombination med flex-grow?Ja, flex-shrink, flex-grow og flex-basis kan bruges sammen for at opnå et fleksibelt layout.
Hvad sker der, hvis flex-shrink sættes til 0?Hvis flex-shrink sættes til 0, formindskes de respektive elementer ikke, selvom containeren er mindre end summen af flex-basis.
