Du har 14 kort i en flex container, men containeren er bare 600 piksler bred. Resultatet er at innholdet flyter utenfor containeren og lager et horisontalt scrollproblem. Elementene krymper seg så mye de kan, men det er rett og slett for mange av dem. Flex-wrap i CSS løser dette ved å bryte elementer over på en ny linje når plassen ikke strekker til. I stedet for overflytende innhold får du en ryddig layout der hvert element tar den plassen det trenger.
Hvorfor innhold flyter utenfor en flex container
Standardverdien for flex-wrap er nowrap. Det betyr at alle flex items tvinges inn på en enkelt linje, uansett hvor mange de er. Nettleseren krymper hvert element så mye den kan for å få plass, men når elementene har innhold med en minimumsbredde, klarer de ikke krympe mer. Da havner de utenfor containeren, og du får det som kalles overflowing content.
Du kan skjule overflytende innhold med overflow: hidden, men da mister du elementer helt. En bedre løsning er å la elementene bryte til neste linje. Det er nettopp det flex-wrap gjør.
Flex-wrap i CSS bryter elementer til ny linje
Setter du flex-wrap: wrap på en flex container, får elementer som ikke får plass på gjeldende linje lov til å flytte seg ned til neste. Hvert element tar opp akkurat den plassen det trenger for å vise innholdet sitt, i stedet for å bli krympet sammen.
Forskjellen er tydelig. Med nowrap presses 14 elementer inn på en rad, og alle krymper. Med wrap fordeler de seg over flere rader, og hvert element beholder sin naturlige størrelse. Legger du til eller fjerner elementer, tilpasser layouten seg automatisk. Dette gjør flex-wrap til en nøkkelegenskap for responsivt design.
Flex-wrap og flex-shrink henger sammen
Uten wrap forsøker nettleseren å krympe alle elementer for å få plass. Flex-shrink-verdien bestemmer hvor mye hvert element krymper. Setter du flex-shrink: 0 på et element i en nowrap-container, nekter det elementet å krympe. Det tar opp all plassen det trenger, og dytter naboelementene enda lenger utenfor containeren.
Med wrap aktivert forsvinner dette problemet. Elementer som ikke får plass bryter til neste linje i stedet for å krympe eller flyte over. Du slipper å bekymre deg for kompliserte shrink-beregninger.
Align-content styrer radene langs kryssaksen
Når innhold brytes over flere linjer, oppstår et nytt spørsmål: hvordan skal radene fordeles vertikalt? Her kommer align-content inn. Denne egenskapen fungerer bare når containeren har flex-wrap aktivert og innholdet faktisk brytes over flere linjer.
Standardverdien er stretch, som betyr at radene strekkes for å fylle hele containerens høyde. Med flex-start festes alle rader til toppen, med flex-end til bunnen, og med center sentreres de vertikalt. Du har også space-between og space-around, som fordeler plass mellom radene akkurat som justify-content gjør langs hovedaksen.
Merk forskjellen: align-items styrer plassering av enkeltitems innenfor en rad, mens align-content styrer plasseringen av selve radene i containeren. De to egenskapene løser ulike problemer og kan brukes samtidig.
Praktiske bruksområder for flex-wrap
Flex-wrap er spesielt nyttig for kortlayouter og gallerier. Du setter en fast minimumsbredde på hvert kort og lar flex-wrap håndtere resten. Når vinduet smalner, hopper kort til neste rad automatisk. Kombinert med media queries kan du justere antall kolonner for ulike skjermstørrelser.
Navigasjonsmenyer med mange lenker er et annet eksempel. I stedet for at lenkene krympes til uleselig tekst, bryter de til en ny rad. Brukeren ser alt innholdet uten å måtte scrolle horisontalt.
For en komplett oversikt over flex-wrap og align-content, se MDN sin referanse for flex-wrap.
Lær mer om flex-wrap med video
Denne artikkelen bygger på en videoleksjon fra CSS-kurset på Utdannet.no. I kurset lærer du:
- Visuell demonstrasjon av overflowing content og hvordan flex-wrap løser problemet
- Hvordan align-content fordeler rader med flex-start, center, space-between og flere verdier
- Samspillet mellom flex-wrap og flex-shrink med konkrete eksempler i nettleseren
