Flex-wrap - CSS-tricks

Anonim

Den flex-wrapegenskab er en sub-egenskab af Flexible Box layout modul.

Den definerer, om flex-elementerne tvinges i en enkelt linje eller kan strømme ind i flere linjer. Hvis den er indstillet til flere linjer, definerer den også tværaksen, der bestemmer retningen, som nye linjer stables i.

Påmindelse: tværaksen er aksen vinkelret på hovedaksen. Dens retning afhænger af hovedaksen retning.

Den flex-wrapejendom accepterer 3 forskellige værdier:

  • nowrap( standard ): enkeltlinie, som kan få containeren til at løbe over
  • wrap: flere linjer, retning er defineret af flex-direction
  • wrap-reverse: flere linjer, modsat retning defineret af flex-direction

Syntaks

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

Demo

I følgende demo:

  • Den røde liste er indstillet til nowrap
  • Den gule liste er indstillet til wrap
  • Den blå liste er indstillet til wrap-reverse

Bemærk: flex-directioner indstillet til standardværdien: row.

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

Browsersupport

Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.

Desktop

Chrome Firefox IE Edge Safari
21 * 28 11 12 6,1 *

Mobil / tablet

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

For mere information om, hvordan man blander syntakser for at få den bedste browsersupport, henvises til denne artikel (CSS-Tricks) eller denne artikel (DevOpera).