Lankstus apvyniojimas - CSS-gudrybės

Anonim

Ši flex-wrapnuosavybė yra „Flexible Box Layout“ modulio sub-ypatybė.

Jis apibrėžia, ar lankstūs elementai yra priversti vienoje eilutėje, ar gali būti perkelti į kelias eilutes. Nustačius kelias eilutes, ji taip pat apibrėžia kryžminę ašį, kuri nustato krypties, kuria sukraunamos naujos linijos.

Priminimas: skersinė ašis yra ašis, statmena pagrindinei ašiai. Jo kryptis priklauso nuo pagrindinės ašies krypties.

flex-wrapNuosavybė priima 3 skirtingų dydžių:

  • nowrap( numatytasis ): vienos eilutės, dėl kurios konteineris gali perpildyti
  • wrap: kelių eilučių, kryptis apibrėžiama flex-direction
  • wrap-reverse: daugialypės linijos, priešingos krypčiai, apibrėžtai flex-direction

Sintaksė

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

Demonstracija

Šioje demonstracijoje:

  • Raudonasis sąrašas nustatytas į nowrap
  • Geltonasis sąrašas nustatytas į wrap
  • Mėlynas sąrašas nustatytas į wrap-reverse

Pastaba: flex-directionyra nustatytas į numatytąją vertę: row.

Peržiūrėkite „CSS-Tricks“ („@ css-tricks“) „Pen Flex-wrap: demo“, esantį „CodePen“.

Naršyklės palaikymas

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.

Darbalaukis

„Chrome“ „Firefox“ T.Y Briauna „Safari“
21 * 28 11 12 6,1 *

Mobilusis / planšetinis kompiuteris

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

Norėdami gauti daugiau informacijos apie tai, kaip maišyti sintakses, kad gautumėte geriausią naršyklės palaikymą, žr. Šį straipsnį (CSS-Tricks) arba šį straipsnį (DevOpera).