Flexbox: Styr krympning längs flexriktningen med flex-shrink

I den här handledning fokuserar vi på CSS-egenskapsmodifieraren flex-shrink. Detta alternativ är en del av Flexbox-modellen, som låter dig skapa flexibla layouter som anpassar sig till olika skärmstorlekar. Medan vi i den senaste videon behandlade flex-grow, som styr hur element kan växa i Flex-container, handlar det denna gång om att krympa element när utrymmet i containern är mindre än den angivna flex-basen. I den här artikeln lär du dig hur du kan begränsa eller anpassa krympningen av Flexbox-element med flex-shrink.

Viktigaste insikter

• flex-shrink bestämmer hur mycket ett element kan krympa när det inte finns tillräckligt med utrymme.
• Standardvärdet för flex-shrink är 1, vilket innebär att ett element kan ta plats beroende på hur mycket utrymme som finns tillgängligt och hur övriga element i containern är definierade.
• Du kan använda flex-shrink för att ange en specifik krympningskvot mellan flera element.

Steg-för-steg-guide

Nedan kommer jag att förklara stegen för att optimalt använda flex-shrink. Jag kommer att lista varje steg med skärmdumpvariabler som du senare kan ersätta med bildskärmdumparna från videon.

Först ser du en grundläggande Flexbox-applikation i CSS. Du har tre element med en flex-bas på 100 pixlar. Om det finns tillräckligt med utrymme i Flex-containern kommer allt att förbli som planerat.

Nu minskar vi höjden på containern till 200 pixlar. I detta fall är utrymmet som behövs större än höjden på containern. Elementen har fortfarande en flex-bas på 100 pixlar och kan därför inte krympa eftersom vi har satt flex-shrink till 0.

För att aktivera krympmekanismen ändrar du värdet för flex-shrink. Sätt det till 1 för elementet nav. På så vis informerar du CSS att nav-elementet ska krympa maximalt.

Spara nu dina ändringar, och du kommer att se att nav-elementet krymper proportionellt, ända ner till den minimala höjden som anges av innehållet.

Om du vill att alla element ska krympa jämnt, sätt flex-shrink till 1 för alla element. Om containern nu blir mindre än det nödvändiga utrymmet kommer alla element att krympa proportionellt.

För att sammanfatta hur de olika flex-shrink-värdena påverkar layouten, välj en kvot som 1:1:2. I detta fall får huvuddelen (main) den största krympandelen, medan de andra elementen får de mindre komponenterna var för sig.

Det innebär att huvudelementet kommer att ta upp mer utrymme eller behöva mindre utrymme än de andra elementen vid platsbrist. Om du dock vill ha en likformig layoutjustering kan du också sätta flex-shrink till samma värde för alla element.

Sist men inte minst kan du kombinera värdena för flex-grow, flex-shrink och flex-basis för att öka flexibiliteten i layoutdesignen i CSS. Se till att anpassa dem efter ditt designs behov.

Sammanfattning

I den här handledningen har du lärt dig hur du använder flex-shrink i CSS för att styra storleksförändringen av Flexbox-element. Du har fått lära dig olika sätt att definiera krympning och hur det påverkar layouten.