Skip to main content
Remoção de frase desnecessário e melhoria na disposição dos links
Fonte Link
igventurelli
  • 4,6mil
  • 1
  • 17
  • 34

Olá! Acho que entendi sua dúvida!

Na div pai, você precisaria definir duas propriedades que definem como os elementos devem agir quando precisam fazer essa quebra de linha.

A primeira seria flex-direction: row | row-reverse | column | column-reverse;. Ela informa qual será a direção em que o elemento "crescerá".

A segunda seria flex-wrap: nowrap | wrap | wrap-reverse;. Ela informa como deve ser feita a quebra de linhas do elemento.

Para facilitar, existe a versão encurtada essas duas propriedades, que é a flex-flow, a qual você passa como primeiro argumento a direção e em segundo a quebra de linha.

Fiz de forma bem rápida um código que acho que vai te ajudar, segue o link abaixo!

. Você pode ver https://codepen.io/victorjordan95/pen/YLGYMMfuncionando no CodePen.

Um link bem legal para ter como referência é o do CSS-TricksCSS-Tricks, nele contém uma explicação detalhada de propriedades do flexbox

https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

Olá! Acho que entendi sua dúvida!

Na div pai, você precisaria definir duas propriedades que definem como os elementos devem agir quando precisam fazer essa quebra de linha.

A primeira seria flex-direction: row | row-reverse | column | column-reverse;. Ela informa qual será a direção em que o elemento "crescerá".

A segunda seria flex-wrap: nowrap | wrap | wrap-reverse;. Ela informa como deve ser feita a quebra de linhas do elemento.

Para facilitar, existe a versão encurtada essas duas propriedades, que é a flex-flow, a qual você passa como primeiro argumento a direção e em segundo a quebra de linha.

Fiz de forma bem rápida um código que acho que vai te ajudar, segue o link abaixo!

https://codepen.io/victorjordan95/pen/YLGYMM

Um link bem legal para ter como referência é o do CSS-Tricks, nele contém uma explicação detalhada de propriedades do flexbox

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Na div pai, você precisaria definir duas propriedades que definem como os elementos devem agir quando precisam fazer essa quebra de linha.

A primeira seria flex-direction: row | row-reverse | column | column-reverse;. Ela informa qual será a direção em que o elemento "crescerá".

A segunda seria flex-wrap: nowrap | wrap | wrap-reverse;. Ela informa como deve ser feita a quebra de linhas do elemento.

Para facilitar, existe a versão encurtada essas duas propriedades, que é a flex-flow, a qual você passa como primeiro argumento a direção e em segundo a quebra de linha.

Fiz de forma bem rápida um código que acho que vai te ajudar. Você pode ver funcionando no CodePen.

Um link bem legal para ter como referência é o do CSS-Tricks, nele contém uma explicação detalhada de propriedades do flexbox.

Fonte Link

Olá! Acho que entendi sua dúvida!

Na div pai, você precisaria definir duas propriedades que definem como os elementos devem agir quando precisam fazer essa quebra de linha.

A primeira seria flex-direction: row | row-reverse | column | column-reverse;. Ela informa qual será a direção em que o elemento "crescerá".

A segunda seria flex-wrap: nowrap | wrap | wrap-reverse;. Ela informa como deve ser feita a quebra de linhas do elemento.

Para facilitar, existe a versão encurtada essas duas propriedades, que é a flex-flow, a qual você passa como primeiro argumento a direção e em segundo a quebra de linha.

Fiz de forma bem rápida um código que acho que vai te ajudar, segue o link abaixo!

https://codepen.io/victorjordan95/pen/YLGYMM

Um link bem legal para ter como referência é o do CSS-Tricks, nele contém uma explicação detalhada de propriedades do flexbox

https://css-tricks.com/snippets/css/a-guide-to-flexbox/