# Flexbox: como passar para a próxima linha fácil
> Aprenda como quebrar para próxima linha em Flexbox. Técnicas e truques práticos para controlar wrapping e quebras de elementos flex. Domine!
URL: https://dpw.dev/css/flexbox-quebrar-proxima-linha-breakline/
Publicado em: 2019-05-20
Categoria: css
Tags: flexbox, layout, web-design
Autor: Tárcio Zemel
Flexbox é uma das melhores tecnologias para layouts, mas às vezes **quebrar para a próxima linha com Flexbox** pode exigir 1 ou 2 macetinhos...
> Artigo baseado em [Breaking to a new row with flexbox](https://tobiasahlin.com/blog/flexbox-break-to-new-row/).
Se você quiser criar um layout Flexbox com várias linhas de itens, como você controla quais itens acabam em qual linha?
Seria um layout parecido com este, com 3 itens empilhados e itens de largura total alternados:
Uma maneira comum de controlar o posicionamento e o tamanho de flex items é usar `width` ou `flex-basis`; se o 4º item for definido para ter uma largura de 100%, ele será posicionado em sua própria linha.
Mas, e se não for possível definir a largura de itens individualmente? Ou existe uma maneira de apenas dizer ao flexbox para **quebrar de linha** em certos pontos?
Não há nenhuma propriedade possível de se definir em um flex item que o faça passar para uma nova linha, mas é possível inserir uma linha collapsed (pense nisso como um `
`) entre 2 flex items para conseguir algo semelhante.
```scss
/* Inserir essa linha collapsed entre 2 flex items fará com que
* o flex item que vem depois "quebre" para uma nova linha */
.break {
flex-basis: 100%;
height: 0;
}
```
```html
```
Vamos a alguns cenários (situações que podem ocorrer no dia-a-dia com Flexbox) para quando você quiser usar isso e observar algumas técnicas de layout interessantes que a técnica oferece.
Observe que todos os exemplos de código abaixo exigem e pressupõem que você tenha um flex container com `display: flex` e `flex-wrap: wrap` e que flex items sejam adicionados a esse contêiner:
```scss
.container {
display: flex;
flex-wrap: wrap;
}
```
```html
```
## Como quebrar linha depois de um flex item
Usar um elemento para quebrar uma nova flex row vem com um efeito interessante: é possível não especificar a largura de qualquer item no layout e confiar completamente nas quebras de linha para definir o fluxo.
Vamos começar com um exemplo simples. Digamos que temos 2 itens mostrados lado a lado (eles estão definidos para crescer com `flex-grow: 1` e não possuem `width` ou `flex-basis` definidas):
É possível inserir um elemento de quebra de linha entre os itens para que ambos ocupem 100% do espaço disponível:
```html
...
...
```
Isso produz um layout com 2 itens de largura total empilhados verticalmente (uma borda foi adicionada ao elemento `.break` para ilustrar sua posição e comportamento):
Como é que isso funciona? Como foi dito, `.break` deve ocupar 100% da largura do container (`flex-basis: 100%`), o item flexível de quebra precisa ficar na sua própria linha para conseguir isso.
Não é possível compartilhar uma linha com o primeiro item para que ele seja dividido em uma nova linha, o que deixará o primeiro item sozinho em uma linha.
O primeiro item crescerá então para preencher o espaço restante (`flex-grow: 1`). A mesma lógica se aplica ao segundo item.
É possível usar essa técnica para, por exemplo, fazer um layout quebrando antes e depois de cada 4ª item:
```html
...
...
...
...
...
...
...
```
Basicamente, um item não será quebrado em uma nova linha, a menos que se insira o elemento de breakline:
Novamente, não é preciso especificar a largura em nenhum desses itens. A mesma técnica funcionará para colunas se se tiver um contêiner flexível com `flex-direction: column` e `width` (em vez de `height`) for definida como `0` para o elemento de quebra:
```scss
/* Usa uma coluna collapsed para quebrar em nova coluna */
.break-column {
flex-basis: 100%;
width: 0;
}
```
Essa abordagem de usar elementos de quebra de linha para definir um layout definitivamente adiciona algum inchaço e ruído ao HTML, mas pode ser uma ferramenta poderosa quando usada da maneira correta.
É possível usar a técnica, por exemplo, para [construir um layout masonry apenas com Flexbox](https://tobiasahlin.com/blog/masonry-with-css/) e posicionar as quebras dinamicamente com a propriedade `order`.
Também, quebrar para uma nova linha sem ter que modificar a largura de qualquer item de conteúdo, sendo possível confiar apenas no `flex-grow` para distribuir o espaço no layout.
Suponha que você precise fazer este layout:
E suponha que seja preciso fazer isso definindo valores diferentes de flex-grow para distribuir o espaço (em vez de usar `flex-basis` ou `width`, que demandariam recálculos assim que se adicionasse ou removesse itens):
```scss
.item { flex-grow: 1; }
.item-wide { flex-grow: 3; }
```
```html
```
Se, em seguida, for preciso adicionar outra linha de itens abaixo dessa:
Não seria possível fazer isso sem recorrer à `flex-basis` ou `width` em pelo menos alguns dos itens (ou criar um layout flexbox aninhado com um flex item para cada linha).
Se todos os itens tivessem valores diferentes de `flex-grow`, nada os faria quebrar em uma nova linha, eles apenas se juntariam em uma só linha:
Interessante, mas não é bem o que resultado procurado. Inserindo-se um elemento de quebra, no entanto, é possível fazer esse layout distribuindo todo o espaço com `flex-grow`:
```scss
.item { flex-grow: 1; }
.item-wide { flex-grow: 3; }
```
```html
```
Chegando ao layout desejado, com todos os tamanhos definidos proporcionalmente através de `flex-grow`:
E se houver um cenário em que seja preciso de, digamos, 5 itens na primeira linha, não seria preciso alterar nenhum CSS para alcançar isso.
Bastaria adicionar esses itens antes da quebra de linha:
```html
```
Tudo o que seria preciso adicionar ao CSS para usar os elementos de quebra de linha seriam essas 2 classes (a única diferença entre elas é que `width`, e não `height`, precisaria ser definida como `0` para que o elemento fosse recolhido quando usado em um layout de coluna):
```scss
/ * Inserir uma linha collapsed entre 2 itens flexíveis fará
* o item flexível que vem depois quebrar para uma nova linha * /
.break {
flex-basis: 100%;
height: 0;
}
/* Coluna collapsed que quebrar para uma nova coluna */
.break-column {
flex-basis: 100%;
width: 0;
}
```
## Conclusão
Seria possível, certamente, obter o mesmo efeito ou efeitos similares encaixando flexboxes e tendo um item flexível para cada linha e, em muitos casos, apenas utilizando `flex-basis`, `width` ou o conteúdo dentro dos itens flexíveis, seria provavelmente a maneira "preferida" de controlar o fluxo de itens em um layout flexbox.
Mas a inserção de itens flexíveis de quebra de linha é acessível e fácil de criar, funciona e a técnica vem com algumas características únicas que podem ser úteis.
Também, fica a evidente "alternativa" de se usar [CSS Grid](https://www.youtube.com/playlist?list=PLYgzkrmJnLwpeeGgdADYq3cE2yUwLLTOv) em alguns casos, mas, em algumas situações, pode ser sim preciso se valer de Flexbox para conseguir esses resultados.
O importante é ter ciência de quais as limitações, vantagens e desvantagens _em cada caso concreto_ de implementação para escolher a _tecnologia apropriada_ à construção do layout (ou porção do layout).
---
Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml