Flexbox: Beheer de verkleining in de flex-richting met flex-shrink

In deze handleiding zullen we ons bezighouden met de CSS-eigenschapsaanpasser flex-shrink. Deze optie maakt deel uit van het Flexbox-model, dat je in staat stelt flexibele lay-outs te creëren die zich aanpassen aan verschillende schermformaten. Terwijl we in de vorige video flex-grow hebben behandeld, wat regelt hoe elementen in de Flex-container kunnen groeien, gaat het deze keer over het krimpen van elementen wanneer de ruimte in de container kleiner is dan de voorgeschreven flex-basis. In deze bijdrage leer je hoe je met flex-shrink de verkleining van Flexbox-elementen gericht kunt beperken of aanpassen.

Belangrijkste inzichten

• flex-shrink bepaalt hoeveel een element kan krimpen als er onvoldoende ruimte is.
• De standaardwaarde voor flex-shrink is 1, wat betekent dat een element ruimte kan innemen, afhankelijk van de beschikbare ruimte en hoe andere elementen in de container zijn gedefinieerd.
• Je kunt flex-shrink gebruiken om een specifieke verhouding voor de krimp tussen meerdere elementen vast te stellen.

Stap-voor-stap handleiding

In het volgende zal ik de stappen uitleggen om flex-shrink optimaal te benutten. Ik zal elke stap voorzien van schermafbeeldingsvariabelen die je later kunt vervangen door de specifieke schermafbeeldingen uit de video.

Eerst zie je een basis Flexbox-toepassing in CSS. Je hebt drie elementen met een flex-basis van 100 pixels. Als er voldoende ruimte beschikbaar is in de Flex-container, blijft alles zoals gepland.

Vervolgens verkleinen we de hoogte van de container naar 200 pixels. In dit geval is de benodigde ruimte groter dan de hoogte van de container. De elementen hebben nog steeds een flex-basis van 100 pixels en kunnen dus niet krimpen, omdat we flex-shrink op 0 hebben ingesteld.

Om het krimpmechanisme te activeren, verander je de waarde van flex-shrink. Stel het in op 1 voor het element nav. Zo informeer je CSS dat het element nav maximaal mag krimpen.

Sla nu je wijzigingen op, en je zult zien dat het nav-element proportioneel krimpt, tot de minimale hoogte die wordt bepaald door de inhoud.

Als je wilt dat alle elementen gelijkmatig krimpen, stel dan flex-shrink in op 1 voor alle elementen. Als de container dan kleiner wordt dan de benodigde ruimte, zullen alle elementen dienovereenkomstig krimpen.

Om vervolgens samen te vatten hoe de verschillende flex-shrink waarden van invloed zijn op het lay-out, kies een verhouding zoals 1:1:2. In dit geval krijgt het hoofdgebied (main) het grootste deel van de krimp, terwijl de andere elementen elk kleinere delen krijgen.

Dit betekent dat het main-element bij ruimtegebrek meer ruimte zal innemen of minder ruimte nodig zal hebben dan de beide andere elementen. Als je echter een uniforme lay-outaanpassing wilt, kun je flex-shrink ook voor alle elementen op dezelfde waarde instellen.

Ten slotte kun je de waarden voor flex-grow, flex-shrink en flex-basis combineren, wat je meer flexibiliteit biedt bij het ontwerpen van lay-outs in CSS. Zorg ervoor dat je ze altijd aanpast aan de eisen van je ontwerp.

Samenvatting

In deze handleiding heb je geleerd hoe je flex-shrink in CSS gebruikt om de grootteverandering van Flexbox-elementen te sturen. Je hebt verschillende manieren geleerd om de krimp te definiëren en hoe dit van invloed is op de lay-out.