Solucionado
Olá.
Estou tendo problemas para criar uma "quebra de linha" usando o flexbox. Por padrão o flexbox agrupa todos os elementos em uma única linha, então usei um width: 100% nos elementos junto com flex-wrap. Isso criar uma quebra, porém eles eles ficam distantes um do outro.
Segue um exemplo: https://codepen.io/ViniciusBortoletto/pen/gJdOLe
Gostaria de deixar os dois elementos (texto1 e texto2). Seria possível?
Agradeço se alguém puder ajudar.
hoje, com a Alura e o Google Gemini
Boa noite,
Vc pode usar o flex-direction para mudar o fluxo dos elementos.
flex-direction: row; = os elementos ficam um abaixo do outro.
flex-direction: collums; = os elementos ficam um do lado outro.
No caso do seu codigo existe um espaço entre os títulos pq por padrão o navegador cria um margin e um padding para o h1 e h2 então vc deve zerar isso primeiro.
h1, h2{
margin : 0;
padding: 0;
}Mais informações sobre o flex box no link abaixo https://origamid.com/projetos/flexbox-guia-completo/
Espero ter ajudado!
Muito obrigado Mauricio! Usando o flex-direction realmente funcionou.