Flex-wrap - CSS-triks

Anonim

Den flex-wrapegenskapen er en under egenskap av Flexible Box Layout modul.

Den definerer om flex-elementene blir tvunget i en enkelt linje eller kan strømme inn i flere linjer. Hvis den er satt til flere linjer, definerer den også tverraksen som bestemmer retningen nye linjer er stablet i.

Påminnelse: tverraksen er aksen vinkelrett på hovedaksen. Retningen avhenger av hovedaksen.

Den flex-wrapeiendommen aksepterer 3 forskjellige verdier:

  • nowrap( standard ): enkeltlinje som kan føre til at beholderen flyter over
  • wrap: flere linjer, retning er definert av flex-direction
  • wrap-reverse: flerlinjer, motsatt retning definert av flex-direction

Syntaks

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

Demo

I følgende demo:

  • Den røde listen er satt til nowrap
  • Den gule listen er satt til wrap
  • Den blå listen er satt til wrap-reverse

Merk: flex-directioner satt til standardverdi: row.

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

Nettleserstøtte

Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.

Desktop

Chrome Firefox DVS Kant Safari
21 * 28 11 12 6,1 *

Mobil / nettbrett

Android Chrome Android Firefox Android iOS Safari
88 85 4.4 7,0-7,1 *

For mer informasjon om hvordan du blander syntakser for å få best nettleserstøtte, se denne artikkelen (CSS-Tricks) eller denne artikkelen (DevOpera).