Flex-wrap - CSS-tricks | CSS Almanack 2025

Den flex-wrapegenskapen är en sub-egenskap hos den flexibla Box Layout modul.

Den definierar huruvida flexartiklarna tvingas i en enda rad eller kan flöda i flera rader. Om den är inställd på flera linjer definierar den också korsaxeln som bestämmer riktningen som nya linjer staplas i.

Påminnelse: tväraxeln är axeln vinkelrätt mot huvudaxeln. Dess riktning beror på huvudaxelns riktning.

Den flex-wrapfastighet accepterar 3 olika värden:

nowrap( standard ): enradig som kan få behållaren att rinna över
wrap: flera linjer, riktning definieras av flex-direction
wrap-reverse: flera linjer, motsatt riktning definierad av flex-direction

Syntax

flex-wrap: nowrap | wrap | wrap-reverse .flex-container ( flex-wrap: wrap; )

Demo

I följande demo:

Den röda listan är inställd på nowrap
Den gula listan är inställd på wrap
Den blå listan är inställd på wrap-reverse

Notera: flex-directionsätts till standardvärdet: row.

Se Pen Flex-wrap: demo av CSS-Tricks (@ css-tricks) på CodePen.

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.