Flex-wrap - CSS-trikovi

flex-wrapNekretnina je pod-vlasništvo Fleksibilna Box Izgled modula.

Definira hoće li se flex elementi forsirati u jedan redak ili se mogu pretočiti u više redaka. Ako je postavljeno na više linija, to također definira poprečnu os koja određuje smjer u kojem su nove linije složene.

Podsjetnik: križna os je os okomita na glavnu os. Njegov smjer ovisi o smjeru glavne osi.

flex-wrapNekretnine prihvaća 3 različite vrijednosti:

• nowrap( zadano ): jednostruka linija koja može dovesti do prelijevanja spremnika
• wrap: više linija, smjer je definiran s flex-direction
• wrap-reverse: više linija, nasuprot smjeru definiranom s flex-direction

Sintaksa

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

Demo

U sljedećem pokaznom prikazu:

• Crveni popis je postavljen na nowrap
• Žuti je popis postavljen na wrap
• Plavi popis postavljen je na wrap-reverse

Napomena: flex-directionpostavljena na zadanu vrijednost: row.

Pogledajte Pen Flex-wrap: demo od CSS-Tricks (@ css-tricks) na CodePen-u.

Podrška preglednika

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.

Radna površina

Krom	Firefox	IE	Rub	Safari
21 *	28	11	12	6,1 *

Mobitel / tablet

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

Za više informacija o tome kako miješati sintakse kako biste dobili najbolju podršku za preglednik, pogledajte ovaj članak (CSS-trikovi) ili ovaj članak (DevOpera).