Olá!
Ao utilizar o space-between, os meus elementos ficam colados nos limites da página, porém, quando mudei para space-around, funcionou de forma perfeita. Teria alguma contra indicação ao usar o space-around? Se sim, o que consertar no meu código para o space-between funcionar?
body {
background-color:#8AA6A9;
display: flex;
justify-content: space-around;
box-sizing: border-box;
align-items: center;
height: 100vh;
}
Olá João!
Ao utilizar o justify-content: space-around;, você está criando um espaço igual entre os elementos dentro do contêiner. Não há nenhuma contra indicação em utilizar o space-around, é apenas uma questão de preferência de design.
No entanto, se você deseja utilizar o justify-content: space-between;, é necessário fazer algumas alterações no seu código. No exemplo que você compartilhou, você está aplicando o justify-content: space-around; no body. Para utilizar o space-between, você precisa criar um contêiner para os elementos que deseja espaçar.
No caso do seu código, você pode criar uma <div> que envolva os elementos que você quer espaçar e aplicar o justify-content: space-between; nessa <div>. Por exemplo:
<body>
<div class="container">
<!-- seus elementos aqui -->
</div>
</body>
.container {
display: flex;
justify-content: space-between;
}
Dessa forma, os elementos dentro da <div> serão espaçados igualmente ao utilizar o justify-content: space-between;.
Espero ter ajudado e bons estudos!