Painduv mähis - CSS-trikid | CSS-i almanahh 2025

flex-wrapVara on sub-vara Paindlik Box paigutus moodul.

See määratleb, kas paindlikud elemendid on sunnitud ühte ritta või saab neid voolata mitmesse rida. Kui see on seatud mitmele joonele, määratleb see ka risttelje, mis määrab suuna, kuhu uued jooned on virnastatud.

Meeldetuletus: risttelg on põhiteljega risti olev telg. Selle suund sõltub peatelje suunast.

flex-wrapVara nõustub 3 erinevaid väärtusi:

nowrap( vaikimisi ): üherealine, mis võib põhjustada konteineri ülevoolu
wrap: mitmerealine, suuna määratleb flex-direction
wrap-reverse: mitmerealised, vastupidised määratletud suunale flex-direction

Süntaks

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

Demo

Järgmises demos:

Punane nimekiri on seatud väärtusele nowrap
Kollane loend on seatud väärtusele wrap
Sinine loend on seatud väärtusele wrap-reverse

Märkus: flex-directionon seatud vaikimisi väärtus: row.

Vaadake CodeSenil CSS-Tricksi (@ css-tricks) Pen Flex-wrap: demo.

Brauseri tugi

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.