Solucionado
Olá, gostaria de saber o porquê de quando eu coloco o "margin: 10%;" e deleto o justify-content, não mudar nada? Em outras palavras: parece que quando eu configuro o margin, não é necessário o uso do justify-content...
Gostaria de entender melhor como ambos funcionam.
Oi Eliseu, tudo bem?
O margin é uma propriedade que define a margem externa de um elemento. Quando você define margin: 10%;, está aplicando uma margem de 10% em todas as direções do elemento. Por exemplo, se você aplicar essa propriedade em um elemento retangular, ele terá uma margem de 10% em todos os lados.
Já o justify-content é uma propriedade do flexbox que define como os itens dentro de um container flex serão alinhados horizontalmente. Existem várias opções para essa propriedade, como flex-start, flex-end, center, space-between, entre outras.
No contexto que você mencionou, ao aplicar margin: 10%; e deletar o justify-content, você não percebeu nenhuma mudança porque a propriedade margin está afetando apenas as margens externas do elemento, enquanto o justify-content afeta o alinhamento dos itens dentro do container flex.
Por exemplo, se você tiver um container flex com dois itens dentro, o justify-content vai definir como esses itens serão alinhados horizontalmente dentro do container. Se você definir justify-content: center;, os itens serão centralizados horizontalmente. Mas se você definir margin: 10%;, isso vai afetar apenas as margens externas dos itens, não o alinhamento deles dentro do container.
Então, o margin e o justify-content são propriedades diferentes que afetam aspectos diferentes do layout. O margin é usado para definir margens externas de um elemento, enquanto o justify-content é usado para definir o alinhamento horizontal dos itens dentro de um container flex.
Espero ter esclarecido sua dúvida.
Um abraço e bons estudos.