Skip to content
Kursen webtec

Flexbox wrap

Vi inför responsivitet genom att stacka kolumner när webbläsarens bredd blir för smal för att visa webbplatsens innehåll.

Att stacka kolumner

Man kan kort förklara begreppet “att stacka kolumner” så här:

När kolumner inte får plats på samma rad, placeras de ovanpå varandra i en vertikal stapel istället för bredvid varandra.

Det är ett sätt att göra layouten responsiv, så att innehållet alltid syns på smalare skärmar utan att krympa för mycket.

Flexbox wrap

Ett enkelt sätt att införa responsivitet är att använda CSS flexbox med egenskapen flex-wrap: wrap;. Det gör att kolumnerna automatiskt staplas när de inte får plats på samma rad.

I vår CSS för .row lägger vi till flex-wrap: wrap;:

Lägg till flex-wrap i public/css/responsive.css
/* Row layout using flexbox */
.row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap; /* Allow wrapping on small screens */
}

Ladda om sidan i webbläsaren och justera sidans bredd i webbläsaren eller i detvtools. När sidan blir smalare så staplas (vissa av) kolumnerna vertikalt.

Image description
Bild: Nu stackas vissa kolumner när sidan blir smalare.

Konstruktionen flex-wrap bestämmer om flex-element ska ligga på samma rad eller flyttas till nya rader när det inte finns tillräckligt med utrymme.

  • nowrap → alla element på samma rad (standard)
  • wrap → elementen flyttas automatiskt till nästa rad när de inte får plats
  • wrap-reverse → elementen flyttas till nya rader ovanifrån istället för nedåt

Det kan vara svårt att veta exakt när kolumnerna skall staplas. Det beror på innehållet i kolumnerna och hur mycket utrymme som finns tillgängligt. Därför är det bra att testa med olika skärmstorlekar och justera layouten vid behov.

En enkel förklaring till när wrap sker är när summan av kolumnernas bredder plus mellanrum (gap) blir större än den tillgängliga bredden i raden. För att bedöma när det händer kan man tänka så här:

  1. Kolumnbredd (flex-basis) - anger grundstorleken på varje kolumn.
  2. Flex-grow/flex-shrink - påverkar om kolumnerna kan växa eller krympa för att få plats.
  3. Rads bredd - hur mycket utrymme flexcontainern faktiskt har.
  4. Gap mellan kolumner - det extra avståndet räknas in.

När summan av kolumnbredderna, inklusive gap, överstiger radens bredd, kommer kolumnerna att staplas vertikalt.

I korthet får du alltså testa dig fram och se vilken effekt det får när du ändrar storleken på webbläsarfönstret.