A flex-wrappropriedade é uma subpropriedade do módulo Layout de caixa flexível.
Ele define se os itens flexíveis são forçados em uma única linha ou podem fluir em várias linhas. Se definido para várias linhas, também define o eixo cruzado que determina a direção em que as novas linhas são empilhadas.
Lembrete: o eixo cruzado é o eixo perpendicular ao eixo principal. Sua direção depende da direção do eixo principal.
A flex-wrappropriedade aceita 3 valores diferentes:
nowrap( padrão ): linha única que pode fazer com que o contêiner transbordewrap: multilinhas, a direção é definida porflex-directionwrap-reverse: multilinhas, oposto à direção definida porflex-direction
Sintaxe
flex-wrap: nowrap | wrap | wrap-reverse .flex-container ( flex-wrap: wrap; )Demo
Na seguinte demonstração:
- A lista vermelha está definida para
nowrap - A lista amarela está definida para
wrap - A lista azul está definida para
wrap-reverse
Nota: o flex-directionestá definido para o valor padrão: row.
Veja o Pen Flex-wrap: demo por CSS-Tricks (@ css-tricks) no CodePen.
Suporte para navegador
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 21 * | 28 | 11 | 12 | 6,1 * |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4,4 | 7,0-7,1 * |
Para obter mais informações sobre como misturar sintaxes para obter o melhor suporte do navegador, consulte este artigo (CSS-Tricks) ou este artigo (DevOpera).