Elastīgs iesaiņojums - CSS-triki

Anonim

flex-wrapĪpašums ir sub-īpašums Elastīga Box Izkārtojums moduli.

Tas nosaka, vai elastīgie elementi ir piespiesti vienā rindā, vai tos var iepludināt vairākās līnijās. Ja iestatīts uz vairākām līnijām, tas arī nosaka šķērssiju, kas nosaka jauno līniju sakraušanas virzienu.

Atgādinājums: šķērsass ir ass, kas ir perpendikulāra galvenajai asij. Tās virziens ir atkarīgs no galvenās ass virziena.

Naktsmītne flex-wrappieņem 3 dažādas vērtības:

  • nowrap( noklusējums ): viena rinda, kas var izraisīt konteinera pārpildīšanu
  • wrap: daudzlīnijas, virzienu nosaka flex-direction
  • wrap-reverse: daudzlīnijas, pretēji virzienam, ko nosaka flex-direction

Sintakse

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

Demonstrācija

Šajā demonstrācijā:

  • Sarkanais saraksts ir iestatīts uz nowrap
  • Dzeltenais saraksts ir iestatīts uz wrap
  • Zilais saraksts ir iestatīts uz wrap-reverse

Piezīme: flex-directionir iestatīts uz noklusējuma vērtība: row.

Skatiet CSS-Tricks (@ css-tricks) demonstrāciju Pen Flex-wrap: demo vietnē CodePen.

Pārlūka atbalsts

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

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

Mobilais / planšetdators

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

Lai iegūtu papildinformāciju par sintakses sajaukšanu, lai iegūtu vislabāko pārlūka atbalstu, lūdzu, skatiet šo rakstu (CSS-Tricks) vai šo rakstu (DevOpera).