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

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.