Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Space between se estiver sendo ocupado 100% do conteudo "pai"

No caso do espaçamento entre a section e a imagem era utilizado a propriedade space-between, porém para a responsividade foi adicionado o valor de 50% para a section e 50% para a imagem e logo depois criado um gap entre elas. Gostaria de entender se caso os elementos ocupem 50% e 50% ainda faça sentido utilizar o space-between, já que não existe mais espaço possivel entre esses elementos. Também gostaria de entender se seria possivel e viável (em relação a um codigo limpo) passar o valor de 100% (por exemplo a section com 55% e a img com 55%).

Obrigado por ler :)

1 resposta
solução!

Olá, Leonardo, tudo bem?

Quando você utiliza a propriedade justify-content: space-between; em um container com display: flex;, o que acontece é que o espaço restante no container é distribuído igualmente entre os elementos. Ou seja, se você tem dois elementos, cada um ocupando 50% do espaço do container, não haverá espaço restante para ser distribuído, e portanto, a propriedade space-between não terá efeito visível.

Agora, quando você mencionou sobre passar o valor de 100% (por exemplo a section com 55% e a img com 55%), isso pode causar um overflow, ou seja, seus elementos vão ultrapassar o tamanho do container em resumo vão estourar e vai "vazar" o conteúdo dentro da box. Isso pode não é muito legal geralmente, pois pode causar problemas de layout e responsividade.

No entanto, se você deseja manter um espaço entre os elementos mesmo quando eles ocupam 100% do container, você pode utilizar a propriedade gap. O gap cria um espaço entre as linhas/colunas em um container flex ou grid.

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!