Como é calculado o espaço entre o título e o menu? Eu consigo aumentar ou diminuir esse espaço?
Como é calculado o espaço entre o título e o menu? Eu consigo aumentar ou diminuir esse espaço?
Os tamanhos no flexbox são calculados usando porcentagens em relação a tela do usuário ou ao elemento em que os blocos estão inseridos.
Logo, se você tem 3 elementos e pede para fazer justify-content: space-between
, o flexbox vai jogar os elementos do lado direito e esquerda para as bordas e o que sobrou no meio.
Como são porcentagens, você não consegue movimentar eles para a esquerda e direita se estiver usando o flexbox
sem setar a propriedade flex-direction: column
, mas você consegue mover eles para cima e para baixo utilizando a propriedade margin
no pai
Então seria o seguinte, considerando o html abaixo
<! -- HTML -->
<div class="titulo">
<h1>UM TITULO</h1>
</div>
<div class="pai">
<div class="filho"></div>
<div class="filho"></div>
<div class="filho"></div>
</div>
E o CSS abaixo fica exemplificado
.pai{
display: flex;
width: 100vw;
justify-content: space-around;
margin-top: 50px //funciona!
}
.filho{
height: 100px;
width: 100px;
margin-left: 30px // pode fazer o elemento pular linha ou ficar "apertado" se o stretch estiver setado
}