Joustava kääri - CSS-temppuja | CSS-almanakka 2025

flex-wrapOminaisuus on osa-ominaisuus Flexible Box Asettelu moduuli.

Se määrittelee, pakotetaanko joustavat kohteet yhdelle riville vai voidaanko ne virrata useisiin viivoihin. Jos se asetetaan useille viivoille, se määrittää myös poikkiakselin, joka määrittää suunnan, johon uudet viivat pinotaan.

Muistutus: poikkiakseli on pääakseliin nähden kohtisuora akseli. Sen suunta riippuu pääakselin suunnasta.

flex-wrapOmaisuuden hyväksyy 3 eri arvoja:

nowrap( oletus ): yksirivinen, joka voi aiheuttaa säiliön vuotamisen
wrap: monirivit, suunta määritetään flex-direction
wrap-reverse: moniviivat, vastakkainen suuntaan, jonka määrittelee flex-direction

Syntaksi

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

Demo

Seuraavassa esittelyssä:

Punainen luettelo on asetettu nowrap
Keltainen luettelo on asetettu wrap
Sininen luettelo on asetettu wrap-reverse

Huom: flex-directionasetetaan oletusarvo: row.

Katso CSS-Tricksin Pen Flex-wrap: -demo (@ css-tricks) CodePenistä.

Selaimen tuki

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.