Upogibanje - CSS-triki

Anonim

flex-wrapLastnost je sub-lastnost modula Fleksibilna Box postavitve.

Določa, ali so elementi fleksa vsiljeni v eno vrstico ali jih je mogoče pretakati v več vrstic. Če je nastavljeno na več vrstic, definira tudi prečno os, ki določa smer, v katero so zložene nove črte.

Opomnik: prečna os je os, pravokotna na glavno os. Njegova smer je odvisna od smeri glavne osi.

flex-wrapLastnost sprejema 3 različne vrednosti:

  • nowrap( privzeto ): enojna vrstica, ki lahko povzroči prelivanje vsebnika
  • wrap: več vrstic, smer je določena z flex-direction
  • wrap-reverse: več vrstic, nasproti smeri, ki jo določa flex-direction

Sintaksa

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

Demo

V tej predstavitvi:

  • Rdeči seznam je nastavljen na nowrap
  • Rumeni seznam je nastavljen na wrap
  • Modri ​​seznam je nastavljen na wrap-reverse

Opomba: flex-directionnastavljen na privzeto vrednost: row.

Oglejte si predstavitev Pen Flex-wrap: demo s strani CSS-Tricks (@ css-tricks) na CodePen.

Podpora za brskalnik

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.

Namizje

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

Mobilni / tablični računalnik

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

Za več informacij o tem, kako mešati sintakse, da dobite najboljšo podporo za brskalnik, si oglejte ta članek (CSS-triki) ali ta članek (DevOpera).