Solucionado
Eu não sabia exatamente se fazia os itens um a um flex itens ou se colocava tudo dentro do quadro container... decidi que era uma melhor pratica colocar tudo em um só... Mas me corrijam caso esteja errado !!
.quadros__container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 1150px;
height: 600px;
position: absolute;
left: 176px;
top: 120px;
background: #525c63d8;
padding: 10px;
border-radius: 10px;
}
hoje, com a Alura e o Google Gemini
Olá, Victor! Tudo bem contigo!
No seu caso, você está tentando organizar os logos de tecnologias em duas linhas. Portanto, faz sentido colocar todos os logos dentro de um container flex, assim como você fez. Isso porque, ao definir o container como um elemento flex, você pode facilmente manipular a disposição dos itens filhos (neste caso, os logos) usando as propriedades do flexbox.
Aqui está um exemplo de como você poderia modificar seu código para alcançar o layout desejado:
.quadros__container {
display: flex;
flex-wrap: wrap; /* Permite que os itens sejam dispostos em várias linhas */
justify-content: space-between; /* Distribui os itens igualmente ao longo do eixo horizontal */
width: 1150px;
height: 600px;
position: absolute;
left: 176px;
top: 120px;
background: #525c63d8;
padding: 10px;
border-radius: 10px;
}
Note que a propriedade flex-direction foi removida. Por padrão, o valor de flex-direction é row, o que significa que os itens serão dispostos em linhas. Além disso, a propriedade justify-content foi adicionada para distribuir os itens igualmente ao longo do eixo horizontal.
Espero ter ajudado.
Caso tenha dúvidas, fico á disposição.
Abraços e bons estudos!