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